Configuring Grid System
On grid to rule them all. Slates Grid system is powerful and flexible enough to build just about anything.
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%;
$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%;
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";
$center-containers: true; $center-container-max-width: 1140px;
$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.