Example

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

.pl-item
.pl-item
.pl-item
.pl-item
.pl-item
.pl-item
.pl-item
.pl-item
.pl-item
.pl-item
.pl-item
.pl-item

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
.pl-item
.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
.pl-item
.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
.pl-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
.pl-item
.pl-item
.pl-item
.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>
Source: _shop19-styleguide.scss, line 430