Content
-
Check out version 4
This is the previous version of SFUMATO. Check out the latest!
-
What is SFUMATO?
-
Get started
-
Color
-
Form elements
-
CSS grid
-
Helpers
-
Media
-
Media queries
-
Typography
-
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!
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.
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})
Controls how grid cells wrap or otherwise fill a row. Values include:
row
column
dense
row dense
column dense
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})
Defines the horizontal gutter (gap) between grid cells. Values include:
normal
{rem, fr, etc. length}
{percentage}
Defines the vertical gutter (gap) between grid cells. Values include:
normal
{rem, fr, etc. length}
{percentage}
Defines the vertical gutter (gap) at the top of the grid. Values include:
normal
{rem, fr, etc. length}
{percentage}
Defines the vertical gutter (gap) at the bottom of the grid. Values include:
normal
{rem, fr, etc. length}
{percentage}
Defines the size of grid columns that are not explicitly set by --sf-{breakpoint-}cols.
Defines the size of grid rows that are not explicitly set by --sf-{breakpoint-}rows.
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
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.
Defines the overflow behavior of grid cell contents.
visible
hidden
scroll
auto
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}
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}
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
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
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
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
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
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
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
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