Table of contents

Flexbox grids

SFUMATO offers a simple, convenient, flexbox-based, multi-column grid system. If you've created a traditional 12-column responsive grid layout before, you'll find that it mostly follows the pattern you already know. The difference is that you can define the number of grid columns supported. You can use 12, or set it to 100 to mimic a percentage system. That said, there are two primary reasons we created this grid system:

  1. to ensure reliable grid behavior within a scalable framework, and...
  2. to help make creating grid-based layouts flexible and easy.

Oh, snap! Here's one...

This one looks the same in browsers newer than IE11


Below you'll find information that describes the grid system and how to use it in various scenarios. You'll also find examples of implementing scalable, responsive, flexbox grids.

There are two primary ways to use the grid system: automatic and manual. Automatic mode only requires HTML markup. Manual mode requires some SCSS code but is more flexible. And you can use an automatic grid with some extra manual overrides. Read on to find out more.

NERD FACT: SFUMATO grid cell left/right (horizontal) gutters can be rems or percentages that are used for grid cell padding (1/2 the gutter value on each side). Grid cell top/bottom (row) gutters are padding values in rems (1/2 the gutter value on each side). This gives you the ability to do things like easily add borders between grid cells. The grid's left/right and top/bottom edges use negative margin to negate the extra space after the last grid cell or row.

Automatic grids

Automatic grids allow you to simply create HTML markup with some specific attributes to get a scalable, responsive grid working quickly. These are useful for grids of equal-sized columns, grids with gutters, or a quick start to a more complex grid.

Two ways to use automatic grids

1. Legacy browsers (IE11 support)

If you have $support-all-browsers: true; in the _config.scss, you will use tag attributes to create grids. Older browsers don't support CSS custom properties, so we created tag attribute selectors that include pre-set measurements. This makes the generated CSS much larger, but ensures that the grids work for browsers from IE11 on up. Fortunately, you can edit the _config-measurements.scss file and configure the various measurement ranges you'll need to keep the file size of generated CSS as small as possible.

The oldest desktop browsers supported are:

  • Internet Explorer 11 (October 2013)
  • Edge 12 (March 2015)
  • Chrome 29 (August 2013)
  • Firefox 28 (October 2013)
  • Opera 17 (October 2013)
  • Safari 9 (September 2015)

The oldest mobile browsers supported are:

  • iOS Safari 9.2 (December 2015)
  • Opera Mobile 37 for Android (March 2016)
  • Android webview 4.4 (October 2013)
  • Chrome 29 for Android (August 2013)
  • Firefox 31 for Android (September 2014)

Here is an example of a simple automatic grid with three columns of equal widths and a gutter, using tag attributes:

                                
                                    <div role="grid" sf-cols="3" sf-gutters="2%" sf-row-gutters="0.5rem">
                                        <div role="gridcell"></div>
                                        <div role="gridcell"></div>
                                        <div role="gridcell"></div>
                                    </div>
                                
                            

2. Modern browsers (no IE11 support)

If you have $support-all-browsers: false; in the _config.scss, you will use CSS custom properties to create grids. This makes the generated CSS much smaller and no pre-set measurements are required. These grids work for browsers newer than IE11.

The oldest desktop browsers supported are:

  • Edge 15 (April 2017)
  • Chrome 49 (March 2016)
  • Firefox 31 (March 2014)
  • Opera 36 (March 2016)
  • Safari 9 (September 2015)

The oldest mobile browsers supported are:

  • iOS Safari 9.2 (December 2015)
  • Opera Mobile 37 for Android (March 2016)
  • Android webview 50 (May 2016)
  • Chrome 49 for Android (November 2015)
  • Firefox 31 for Android (September 2014)

Here is an example of a simple automatic grid with three columns of equal widths and a gutter, using CSS custom properties:

                                
                                    <div role="grid" style="--sf-cols: 3; --sf-gutters: 2%; --sf-row-gutters: 0.5rem;">
                                        <div role="gridcell"></div>
                                        <div role="gridcell"></div>
                                        <div role="gridcell"></div>
                                    </div>
                                
                            

Media breakpoints

You can specify media breakpoints along with your grid attributes to finely control when the grid changes appearance. Below are the breakpoints (and their selector prefixes) that ship with SFUMATO:

  • zero sf-* — mobile first
  • phablet sf-phab-* — large handheld
  • tablet-portrait sf-tabp-* — tablet held in portrait orientation
  • tablet-landscape sf-tabl-* — tablet held in landscape orientation
  • notebook sf-note-* — notebook computer
  • desktop sf-desk-* — desktop computer (large screen)
  • elastic sf-elas-* — the point at which scaling and resizing should stop; can also be used as a super large breakpoint for layouts that never stop scaling up

Grid style attributes

By prefixing the following attributes for each breakpoint, you can easily control grid appearance right in the HTML markup, saving you the trouble of writing SCSS code. You can also fine-tune a grid that is established this way, since SCSS code will override these settings.

Columns

{prefix}-cols="#"values: 1 to $base-column-count

This tells the grid how many equal-width columns to assume as a default. You can always change the grid cell widths and other styles in your own SCSS code. Edit _config-measurements.scss and change $base-column-count to the maximum number of columns you'd like to use. The default is 12.

Example: a mobile layout with 1 column and a gutter beneath each row, and a tablet-portrait layout with 4 columns and a 3% gutter between the cells, with a 2rem gutter below each row of cells.

                                
                                    <div role="grid" sf-row-gutters="1.25rem" sf-tabp-cols="4" sf-tabp-gutters="3%" sf-tabp-row-gutters="2rem">
                                
                            
                                
                                    <div role="grid" style="--sf-row-gutters: 1.25rem; --sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem;">
                                
                            

Gutters

{prefix}-gutters="{value}" — percentage or rem value

Defines the left/right gap between grid cells. To keep the generated CSS small, you can define how high these values can go, and what increment (fractions) are supported. See the _config-measurements.scss file for more information.

Example: a tablet-portait layout that uses a gutter of 3%.

                                
                                    <div role="grid" sf-tabp-cols="4" sf-tabp-gutters="3%" sf-tabp-row-gutters="2rem">
                                
                            
                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem;">
                                
                            

Row gutters

{prefix}-row-gutters="{value}" — rem value

Defines the top/bottom gap between rows of grid cells. To keep the generated CSS small, you can define how high these values can go, and what increment (fractions) are supported. See the _config-measurements.scss file for more information.

Example: a tablet-portait layout that uses a row gutter of 2rem.

                                
                                    <div role="grid" sf-tabp-cols="4" sf-tabp-gutters="3%" sf-tabp-row-gutters="2rem">
                                
                            
                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem;">
                                
                            

Direction

{prefix}-flex-direction

This defines the grid cells rendering order.

Example: a mobile layout that reverses the column order for mobile, and clears that setting for tablet-portrait.

                                
                                    <div role="grid" sf-flex-direction="column-reverse" sf-row-gutters="1.25rem" sf-tabp-cols="4" sf-tabp-gutters="3%" sf-tabp-row-gutters="2rem" sf-tabp-flex-direction="row">
                                
                            
                                
                                    <div role="grid" style="--sf-flex-direction: column-reverse; --sf-row-gutters: 1.25rem; --sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem; --sf-tabp-flex-direction: row;">
                                
                            

Grid cell heights

{prefix}-equal-heights

All grid cells in a row will be the height of the tallest grid cell in that row.

Example: a tablet-portait layout that uses equal heights.

                                
                                    <div role="grid" sf-tabp-cols="4" sf-tabp-gutters="3%" sf-tabp-row-gutters="2rem" sf-tabp-equal-heights>
                                
                            
                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem; --sf-tabp-equal-heights: 1;">
                                
                            

Grid cell vertical alignment

{prefix}-centered

All grid cells in a row will vertically center their direct descendants.

Example: a tablet-portait layout that uses vertical centering.

                                
                                    <div role="grid" sf-tabp-cols="4" sf-tabp-gutters="3%" sf-tabp-row-gutters="2rem" sf-tabp-centered>
                                
                            
                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem; --sf-tabp-centered: 1;">
                                
                            

Grid cell attributes

By prefixing the following attributes for each breakpoint, you can easily control grid cell appearance right in the HTML markup, saving you the trouble of writing SCSS code. You can also fine-tune grid cells established this way, since SCSS code will override these settings.

Note: when configured to "support all browsers", percentage values are limited to the ranges defined in the config.measurements.scss file.

Widths

{prefix}-col="{1 to $base-column-count}" — column-count (legacy)
{prefix}-width="%" — percentage (modern)
{prefix}-frac="{#/#}" — fraction (modern)

Defines the width of an individual grid cell. In a 12-column system, the value 12 would equal 100% width. Likewise, a value of 6 would equal 50% width. Edit _config-measurements.scss and change $base-column-count to the maximum number of columns you'd like to use.

Example: a grid with two columns and asymmetric grid cell widths.

                                    
                                        <div role="grid" sf-tabp-cols="2">
                                            <div role="gridcell" sf-tabp-col="4"></div>
                                            <div role="gridcell" sf-tabp-col="8"></div>
                                        </div>
                                    
                                
                                    
                                        <div role="grid" style="--sf-tabp-cols: 2;">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/3;"></div>
                                            <div role="gridcell" style="--sf-tabp-width: 67%;"></div>
                                        </div>
                                    
                                

Push

{prefix}-push-col="{1 to $base-column-count}" — column-count (legacy)
{prefix}-push="%" — percentage (modern)
{prefix}-push-frac="{#/#}" — fraction (modern)

Pushes a grid cell to the right by a specific amount. This eliminates the need to create empty grid cells for some layouts.

Example: a grid with two columns with pushed grid cells.

                                    
                                        <div role="grid" sf-tabp-cols="2">
                                            <div role="gridcell" sf-tabp-col="2" sf-tabp-push-col="2"></div>
                                            <div role="gridcell" sf-tabp-col="2" sf-tabp-push-col="2"></div>
                                        </div>
                                    
                                
                                    
                                        <div role="grid" style="--sf-tabp-cols: 2;">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-push-frac: 1/6;"></div>
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-push: 16%;"></div>
                                        </div>
                                    
                                

Pull

{prefix}-pull-col="{1 to $base-column-count}" — column-count (legacy)
{prefix}-pull="%" — percentage (modern)
{prefix}-pull-frac="{#/#}" — fraction (modern)

Pulls a grid cell to the left by a specific amount. This eliminates the need to create empty grid cells for some layouts.

Example: a grid with two columns with pulled grid cells.

                                    
                                        <div role="grid" sf-tabp-cols="2">
                                            <div role="gridcell" sf-tabp-col="2" sf-tabp-pull-col="2"></div>
                                            <div role="gridcell" sf-tabp-col="2" sf-tabp-pull-col="2"></div>
                                        </div>
                                    
                                
                                    
                                        <div role="grid" style="--sf-tabp-cols: 2;">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-pull-frac: 1/6;"></div>
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-pull: 16%;"></div>
                                        </div>
                                    
                                

Auto-width

{prefix}-width-auto

Forces a grid cell to fill the remaining space so long as the content doesn't extend the grid cell wider than the remaining space.

Example: a grid with two columns, the last of which fills the remaining space.

                                    
                                        <div role="grid" sf-tabp-cols="2">
                                            <div role="gridcell" sf-tabp-col="4"></div>
                                            <div role="gridcell" sf-tabp-width-auto></div>
                                        </div>
                                    
                                
                                    
                                        <div role="grid" style="--sf-tabp-cols: 2;">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/3;"></div>
                                            <div role="gridcell" style="--sf-tabp-width-auto: 1;"></div>
                                        </div>
                                    
                                

Manual grids

If you need full control of your grid layout, you'll want to use this type of implementation. Here, the basics of grid behavior are handled for you, but you control things like grid cell widths, gutters, etc.

Here is an example of a simple manual grid with three columns of varied widths. It does not use gutters. This example is for the grid elements of the SFUMATO logo and version bar at the top of the page:

Example manual grid:

USAGE & STYLE GUIDE

Version

HTML

                                        
                                    

SCSS

                                        
                                            [role="grid"] {

                                                > [role="gridcell"] {

                                                    &:nth-child(1) {

                                                        margin-right: 1%;
                                                        width: 15%;
                                
                                                        @include sf-media($from: tablet-portrait) {
                                    
                                                            width: 4.2%;
                                                        }
                                                    }
                                                }
                                            }
                                        
                                    

  Manual is still cake

The markup below is used for the table of contents and intro content at the top of this page. This is a fully manual grid with two columns and gutters; one column is more narrow than the other.

NOTE: When manually styling grids, there are no limits on the range of values for percentages or rems. Those limits are applied only to the HTML (automatic) grids because styles have to pre-exist for them to work.

HTML

                                        
                                            <div id="toc" role="grid">
                                                <div role="gridcell">
                                                    <h3>On this page...</h3>
                                                    ...
                                                    <h3>Examples</h3>
                                                    ...
                                                </div>
                                                <div role="gridcell">
                                                    <h1>Flexbox grids</h1>
                                                    <p>
                                                        SFUMATO offers a...
                                                    </p>
                                                    ...
                                                </div>
                                            </div>                                        
                                        
                                    

SCSS

                                        
                                            [role="grid"] {

                                                @include sf-set-gutter (
                                                    $gutter: false,
                                                    $row-gutter: 2.25rem
                                                );
                                
                                                @include sf-set-gutter (
                                                    $from: tablet-portrait,
                                                    $gutter: 10%,
                                                    $row-gutter: false
                                                );
                                                        
                                                > [role="gridcell"] {

                                                    &:nth-child(1) {

                                                        @include sf-set-width (
                                                            $from: tablet-portrait,
                                                            $width: 30%
                                                        );
                                                    }

                                                    &:nth-child(2) {

                                                        @include sf-set-width (
                                                            $from: tablet-portrait,
                                                            $width: 70%
                                                        );
                                                    }
                                                }
                                            }
                                        
                                    

Manual grid styles

You can override grid behaviors in SCSS code more easily with some helpers. These are applied to the [role="grid"] selector.

                                
                                    [role="grid"] {
                                        @include sf-make-reverse();
                                    }
                                
                            
  • Turn the grid into an equal height grid: @include sf-make-equal-heights();
  • Turn the grid into a centered grid: @include sf-make-centered-grid();
  • Turn the grid into a reverse grid: @include sf-make-reverse();

Gutter

Set a grid's gutter and row gutter. Using this mixin allows for easy use of media breakpoints and adjusts the grid's margins.

                                
                                    [role="grid"] {
                                        @include sf-set-gutter (
                                            $from:tablet-portrait,
                                            $gutter:10%,
                                            $row-gutter:3rem
                                        );
                                    }
                                
                            

Manual grid cell styles

You can also alter grid cell styles in SCSS more easily with some helpers. These are applied to the [role="gridcell"] selectors.

Width

Set a grid cell's width. Using this mixin allows for easy use of media breakpoints and handles growing grid cells to fill the remaining space.

                                
                                    [role="gridcell"] {
                                        @include sf-set-width(
                                            $from: tablet-portrait,
                                            $width: 30%
                                        );
                                    }
                                
                            
  • $from; media query breakpoint (e.g. tablet-portrait)
  • $upto; media query breakpoint (e.g. desktop)
  • $width; width as a percentage (e.g. 50%) or 12-column value (e.g. 6)
  • $important; use an !important attribute

Push and pull

Push a grid cell to the right or pull to the left instead of using empty grid cells for positioning:

                                
                                    [role="gridcell"] {
                                        @include sf-push (
                                            $from: tablet-portrait,
                                            $width: 16%
                                        );

                                        @include sf-pull (
                                            $from: tablet-portrait,
                                            $width: 4
                                        );
                                    }
                                
                            
  • $from; media query breakpoint (e.g. tablet-portrait)
  • $upto; media query breakpoint (e.g. desktop)
  • $width; width as a percentage (e.g. 50%) or 12-column value (e.g. 6)

Examples

The following are some examples of how to implement various grid configurations.

Basic grid

This is a grid without gutters and which has grid cell widths set.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Grid with push

This grid pushed its columns over to center them on tablet-portrait and above. Pull is also available.

Box 1

Box 2

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Reverse grid

Useful for layouts where cells need to be in reverse order for one or more breakpoints. This example uses reverse order grid cells for tablet-portrait and wider displays.

Box 1

Box 2

Box 3

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Grid with gutters

This grid has gutters and uses the default grid cell widths based on the number of columns set.

Box 1

Box 2

Box 3

Box 4

Box 5

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Grid with gutters and push

This grid pushed its columns over to center them on tablet-portrait and above. Pull is also available.

Box 1

Box 2

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Reverse grid with gutters

Useful for layouts where cells need to be in reverse order for one or more breakpoints. This example uses reverse order grid cells for tablet-portrait and wider displays.

Box 1

Box 2

Box 3

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Varied width grid cells

Useful for layouts where grid cells use varied widths, like for sidebar navigation.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Equal height grid cells

Useful for things like pricing panels. Equal heights are not necessary in a single column mobile layout.

Box 1

Box 2

Box 3

Sample box #3

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Vertically centered grid cells

Useful for things like a series of logos. Equal heights are not necessary in a single column mobile layout.

Box 1

Box 2

Box 3

Sample box #3

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.

Nested grid

Nesting grids is useful for more complex layouts with varying gutter sizes.

Box 1

Box 2

Box 3

Box 4

Box 2

Box 3

HTML

                                    
                                

SCSS

This is an automatic grid. No SCSS needed.