Atoms
grid
Template layout grid system
Modifier class formula: sv-- [breakpoint (xsml/sml/med/lrg/xlrg)]- [nth number of columns (of 12) to span]
Breakpoint specific column widths
Nesting
We can also specify pre-defined breakpoint specific column widths: (Notice the change in column sizes over the various breakpoints)
Centering
Equal heights
50px of inner content
100px of inner content
150px of inner content
Alternative flow direction
In cases where columns need to be stacked we can manipulate the order in which the appear
COLUMN 1 - APPEARS ABOVE AT THE LOWEST BREAKPOINT
COLUMN 2 - APPEARS BELOW AT THE LOWEST BREAKPOINT
Uniform block grids
Modifier class formula: sv-- [breakpoint (xsml/sml/med/lrg/xlrg)]- [number of columns to display per row]
Set a column view limit on lower breakpoints for block grids
Modifier class formula: sv-- [breakpoint (xsml/sml/med/lrg/xlrg)]- [number of columns to display in total]