Table of contents

Content

  1. Check out version 4

    This is the previous version of SFUMATO. Check out the latest!

  2. What is SFUMATO?
    1. Get started
      1. Color
        1. Form elements
          1. CSS grid
            1. Helpers
              1. Media
                1. Media queries
                  1. Typography
                    1. Unit layouts

                      CSS grids

                      SFUMATO offers a simple, convenient, multi-column grid system based on the CSS grid specification. The difference between SFUMATO grids and standard 12-column grid systems is that you don't need to work with a specific number of columns, and rows and cells can span most any location. Additionally, column and row gutters are a native feature, not requiring negative margin tricks.

                      They're easy!

                      The markup for the grid above uses simple, consistent CSS custom properties, which means you can control them from Javascript and server-side code. It also means that you can make your web app theme-able without page reloads!

                                                                          
                                                                      
                      scrollable

                      SFUMATO exposes standard CSS grid attributes so what you already know about using CSS grids will work with SFUMATO.

                      Attributes

                      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 zero — mobile first
                      • phablet phab — large handheld
                      • tablet-portrait tabp — tablet held in portrait orientation
                      • tablet-landscape tabl — tablet held in landscape orientation
                      • notebook note — notebook computer
                      • desktop desk — desktop computer (large screen)
                      • elastic 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 attributes

                      Using the following CSS custom properties you can easily create a powerful CSS grid.

                      --sf-{breakpoint-}cols

                      Defines the number and size behavior of columns per row. Values include:

                      none {length} {percentage} {flex} max-content min-content minmax(min, max) auto fit-content([{length}|{percentage}]) repeat([{positive-integer}|auto-fill|auto-fit], {track-list})

                      --sf-{breakpoint-}flow

                      Controls how grid cells wrap or otherwise fill a row. Values include:

                      row column dense row dense column dense

                      --sf-{breakpoint-}rows

                      Defines the number and size behavior of grid rows. Values include:

                      none {length} {percentage} {flex} max-content min-content minmax(min, max) auto fit-content([{length}|{percentage}]) repeat([{positive-integer}|auto-fill|auto-fit], {track-list})

                      --sf-{breakpoint-}col-gap

                      Defines the horizontal gutter (gap) between grid cells. Values include:

                      normal {rem, fr, etc. length} {percentage}

                      --sf-{breakpoint-}row-gap

                      Defines the vertical gutter (gap) between grid cells. Values include:

                      normal {rem, fr, etc. length} {percentage}

                      --sf-{breakpoint-}top-gap

                      Defines the vertical gutter (gap) at the top of the grid. Values include:

                      normal {rem, fr, etc. length} {percentage}

                      --sf-{breakpoint-}bottom-gap

                      Defines the vertical gutter (gap) at the bottom of the grid. Values include:

                      normal {rem, fr, etc. length} {percentage}

                      --sf-{breakpoint-}auto-columns

                      Defines the size of grid columns that are not explicitly set by --sf-{breakpoint-}cols.

                      --sf-{breakpoint-}auto-rows

                      Defines the size of grid rows that are not explicitly set by --sf-{breakpoint-}rows.

                      --sf-{breakpoint-}align-items

                      Defines the horizontal alignment of grid cells. Values include flexbox items:

                      normal start end flex-start flex-end self-start self-end center left right baseline|first baseline|last baseline stretch safe unsafe legacy

                      --sf-{breakpoint-}vertical-align-items

                      Defines the vertical alignment of grid cells. Values include flexbox items:

                      normal start end flex-start flex-end self-start self-end center baseline|first baseline|last baseline stretch safe unsafe

                      Grid cell attributes

                      The following grid cell attributes allow you to fine-tune their layout within the grid.

                      --sf-{breakpoint-}overflow

                      Defines the overflow behavior of grid cell contents.

                      visible hidden scroll auto

                      --sf-{breakpoint-}col

                      Defines the size and location of a grid cell, overriding the grid definition for that grid cell. Uses the start and end properties of a grid cell.

                      auto {integer} -1 {integer}/{span} {integer}

                      --sf-{breakpoint-}row

                      Defines the size and location of a grid cell within the grid row, overriding the grid definition for that grid cell. Uses the start and end properties of a row.

                      auto {integer} -1 {integer}/{span} {integer}

                      --sf-{breakpoint-}align-items

                      Defines the horizontal alignment of the grid cell. Values include flexbox items:

                      normal start end flex-start flex-end self-start self-end center left right baseline|first baseline|last baseline stretch safe unsafe legacy

                      --sf-{breakpoint-}vertical-align-items

                      Defines the vertical alignment of the grid cell. Values include flexbox items:

                      normal start end flex-start flex-end self-start self-end center baseline|first baseline|last baseline stretch safe unsafe

                      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

                                                              
                                                          
                      scrollable

                      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

                                                              
                                                          
                      scrollable

                      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

                      HTML

                                                              
                                                          
                      scrollable

                      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

                                                              
                                                          
                      scrollable

                      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

                                                              
                                                          
                      scrollable

                      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

                                                              
                                                          
                      scrollable

                      Cell positioning grid

                      Repositioning cells is one of the great features of CSS grids.

                      Cell 1

                      Cell 2

                      Cell 3

                      Cell 4

                      Cell 5

                      Cell 6

                      HTML

                                                              
                                                          
                      scrollable