Grid
The grid used across all our products uses the Susy grid-layout engine, to size and position content in a responsive manner based around percentages within a 12 column grid.
This grey wrapper represents our Susy Grid 'container'; 100% width of the available space, with a max-width of 1200px. The grid uses a 12-column layout, with a gutter (margin) down either side of each column.
Here's 12 different items, each set to be 1 column wide (shown in red) using the 'span' mixin, with their associated gutters (blue):
And the code we use to lay it out in this way:
.pl-item { @include span(1); }
Here's 2 items, both set to be 6 columns wide:
.pl-item { @include span(6); }
Here's 2 items- both set to be 6 columns wide again, but using the 'no-gutters' and 'wide' options, which removes both gutters, and adjusts the width on both sides to compensate.
.pl-item { @include span(6 no-gutters wide); }
Finally, here's a 8 and 4 layout, but adding the extra space produced by 'no-gutters' to only the 2nd item, using the 'wider' mixin option on that item:
.pl-item:first-child { @include span(8 no-gutters); } .pl-item:last-child { @include span(4 no-gutters wider); }
Breakpoints
In addition to the grid, all sites also use the same three main breakpoints - SM: 0-739px - MD: 740-1023px - LG: 1024+px
(plus 'Desktop Nav' (1150+px), only used to change our touch-friendly header nav for the mouse-centric version, once we're past "landscape tablet" kind of sizes)
We're able to change our items are laid-out per breakpoint, using media queries in conjunction with the 'span' mixin. Here's 3 different way to layout a 4 item row, resize your browser to see it in action:
.pl-item { // Mobile-first @include span(12); @include breakpoint($screen-md) { @include span(6); } @include breakpoint($screen-lg) { @include span(3); } }
Markup: components/grid/grid.twig
<div class="pl-grid kss-style">
<div class="pl-copy">
<h3>Grid</h3>
<p>The grid used across all our products uses the <strong>Susy</strong> grid-layout engine, to size and position content in a responsive manner based around percentages within a 12 column grid.</p>
<p>This grey wrapper represents our Susy Grid 'container'; 100% width of the available space, with a max-width of 1200px.
The grid uses a 12-column layout, with a gutter (margin) down either side of each column.
</p>
<p>Here's 12 different items, each set to be 1 column wide (shown in red) using the 'span' mixin, with their associated gutters (blue):</p>
</div>
<div class="pl-twelve-cols pl-example">
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
</div>
<div class="pl-copy">
<p>And the code we use to lay it out in this way:</p>
<pre>
.pl-item {
@include span(1);
}
</pre>
<p></p>
<p>Here's 2 items, both set to be 6 columns wide:</p>
</div>
<div class="pl-six-by-six-normal pl-example">
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--yellow">.pl-item</div>
</div>
<div class="pl-copy">
<pre>
.pl-item {
@include span(6);
}
</pre>
<p></p>
<p>Here's 2 items- both set to be 6 columns wide again, but using the 'no-gutters' and 'wide' options, which removes both gutters, and adjusts the width on both sides to compensate.</p>
</div>
<div class="pl-six-by-six pl-example">
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--yellow">.pl-item</div>
</div>
<div class="pl-copy">
<pre>
.pl-item {
@include span(6 no-gutters wide);
}
</pre>
<p></p>
<p>Finally, here's a 8 and 4 layout, but adding the extra space produced by 'no-gutters' to only the 2nd item, using the 'wider' mixin option on that item:</p>
</div>
<div class="pl-eight-by-four pl-example">
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--yellow">.pl-item</div>
</div>
<div class="pl-copy">
<pre>
.pl-item:first-child {
@include span(8 no-gutters);
}
.pl-item:last-child {
@include span(4 no-gutters wider);
}
</pre>
<h3>Breakpoints</h3>
<p>In addition to the grid, all sites also use the same three main breakpoints</br>
- <strong>SM</strong>: 0-739px</br>
- <strong>MD</strong>: 740-1023px</br>
- <strong>LG</strong>: 1024+px</br>
</p>
<p class="font--xsmall">(plus 'Desktop Nav' (1150+px), only used to change our touch-friendly header nav for the mouse-centric version, once we're past "landscape tablet" kind of sizes)</p>
<p>We're able to change our items are laid-out per breakpoint, using media queries in conjunction with the 'span' mixin. Here's 3 different way to layout a 4 item row, resize your browser to see it in action:
</p>
</div>
<div class="pl-breakpoints pl-example">
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--yellow">.pl-item</div>
<div class="pl-item pl--red">.pl-item</div>
<div class="pl-item pl--yellow">.pl-item</div>
</div>
<div class="pl-copy">
<pre>
.pl-item {
// Mobile-first
@include span(12);
@include breakpoint($screen-md) {
@include span(6);
}
@include breakpoint($screen-lg) {
@include span(3);
}
}
</pre>
</div>
</div>
_rnd17-styleguide.scss
, line 431