The grid is completely implicit, so columns will size themselves to be equal width to their siblings.
The grid will display on all screens by default. If you'd like the grid to only start on larger screens, you can use these modifier classes. Columns will be stacked on smaller screens.
The grid will start 600px screen width.
The grid will start at 960px screen width.
By adding these modifier classes, you will change the flex-grow property that the columns use to size themselves, effectively changing the "weight" of the column. Heavier weighted columns will be wider than lighter columns. If all the weights are equal, the column widths will be equal.
Half the weight of the default column.
Twice the weight of the default column.
Wrappers are classes that have a max-width and padding. The size of the wrapper, determines max-width and the padding.
Max width of 640 with top/bottom padding equal to the baseline.
Max width of 960 with top/bottom padding of twice the baseline.
Max width of 1200 with top/bottom padding of three times the baseline.
All the typography is sized using rems (based on 62.5% by default, going up to 78.125% on screens larger than 960px), to a baseline of 2.4rem by default. Every element adheres to this baseline grid with perfect vertical rhythm.
Disables pointer events and lowers the opacity
Force an element to self clear its children
Set the float property to none
Set the float property to left
Set the float property to right
Left align the text
Center align the text
Right align the text
Light (300) font weight
Normal (400) font weight
Semibold (500) font weight
Bold (600) font weight
Small font size
Default font size
Large font size
If you notice something is broken or would like to request a feature, please open an issue on Github. You can also fork the repo and open pull requests, just check the README for guidelines.