Configuring Slate's Grid System

General Settings

These variables speak for themselves really. Define the total number of columns and the total site width. You can also define the spacing between columns and the outer spacing around containers and the edge of the browser window.

$total-columns: 12;
$total-width: 100%;
$gutter-width: 2%;
$column-bottom-spacing: 24px;
$container-margin: 2%;

$total-width, $gutter-width, and $container-margin will accept either px values or % but not both together. For clarity, all three of these variables must set to either a percentage value or a pixel value. This will not work:

Grid Classes

Slate has a mixin you can use to generate a full set of classes for pushing and pulling columns around. This uses a system of rows, columns and push classes to structure the page. You can set the class names used by this mixin with these variables. To learn more about this mixin, click here.

$class-container: "row";
$class-column: "col";
$class-push: "push";

Containers

$center-containers: true;
$center-container-max-width: 1140px;

Breakpoints

$bp-tiny: 320px;
$bp-xsmall: 480px;
$bp-small: 640px;
$bp-medium: 800px;
$bp-large: 960px;
$bp-xl: 1140px;