Layout

The default Grid provides classes spanning 12 columns, and provides breakpoints at the following screen sizes:

All (.all-{column-span}) - 0px and up

Extra small (.xsmall-{column-span}) - 320px and up

Small (.small-{column-span}) - 480px and up

Medium (.medium-{column-span}) - 750px and up

Large (.large-{column-span}) - 960px and up

Extra large (.xlarge-{column-span}) - 1300px and up

These settings can be overriden by specifying your own list of screen sizes you want columns available for. To keep the size of the resulting production stylesheet down, it is recommended to taylor the settings to your requirements, to make sure only the necessary classes are generated. For instance, if your service uses a 4 column grid, and only requires breakpoints at the medium screen size, you should alter the settings like so:

$grid-screen-sizes: ("medium");
$grid-total-columns: 4;

Note: the .all-* classes are always available, even if the $grid-screen-sizes list is empty.