slab-plugin-grid

The Slab.css grid is an inline-block responsive grid with classes generated by the $breakpoints data map.

<div class="grid">
    <div class="grid__item one-half palm-one-third"></div>
</div>

A grid is always wrapped in a grid class with each item having grid__item. By default each item will be 100% width but can be changed via generated classes in the format {namespace}-{fraction as text}. The grid can have a maximum of 12 columns so fractions from 1 to 12 are available.

.three-fifths // namespaceless grid spacer
.lap-and-up-ten-twelfths
.desk-one-whole

Note: as the grid is built using inline-block the space between the html tags must be removed for the grid to work correctly. This can be done through HTML comments or using the Craft CMS {% spaceless %} helper.

<!-- HTML Comments -->  
<div class="grid">
    <div class="grid__item one-half palm-one-third"></div><!--
--><div class="grid__item one-half palm-one-third"></div><!--
--><div class="grid__item one-whole palm-one-third"></div>
</div>


<!-- Craft CMS helper -->
{% spaceless %}
<div class="grid">
    <div class="grid__item one-half palm-one-third"></div>
    <div class="grid__item one-half palm-one-third"></div>
    <div class="grid__item one-whole palm-one-third"></div>
</div>
{% endspaceless %}

The grid also comes with a number of modifier classes to adjust its alignment. These also have the option to be namespaced to only apply to a specific breakpoint.

grid--rev reverses the grid to content runs right to left. grid--right aligns grid to the right. Will only work if grid items to do not make up 100% of the grid parent’s width. grid--center centers align grid columns. Will only work if grid items to do not make up 100% of the grid parent’s width. grid—middle vertically aligns small grid columns to the center. grid—bottom vertically aligns small grid columns to the bottom.

Grid gutters

By default the grid will have its gutter width set to 1rem but this can be changed via the gutter mixin.

.grid--my-custom-grid {
    @include gutter(0); // Removes gutter spacing.
}

Responsive grid gutter classes are also generated from the spacing data map if $slab-grid-responsive-modifiers is set to true. The namespaceless classes will always be generated.

.grid-large // Gutter of 3rem
.portable-grid-small
.desk-wide-grid-medium