Configuring Grid System

On grid to rule them all. Slates Grid system is powerful and flexible enough to build just about anything.

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 except 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:

$total-width: 100%;
$gutter-width: 24px;
$container-margin: 2%;

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;

You can learn more about working with the grid system here.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.