7 Grid system
Flexible, efficient, responsive layout
7.1 Using the grid
The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice
A flexible responsive universal grid is the fundamental layout tool. This will enable users to create multi device layouts quickly and easily with proposed default 12-column nestable grid allowing a large range of layouts and templates across all required screen sizes. It provides a cohesive foundation and flexibility to deal with wide range of layout problems while maintaining a consistency across all products it is used in. Should the default 12 columns not prove adequate for the design task at hand then it can easily customised via the SASS based code to modify.
7.2 Default 12 col
The default grid set up is 12 columns. Column width, gutter with and number of columns can all be customised in _grid.scss
<div class="cf text--center">
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
<div class="col small_6 medium_4 large_1 bg-light-grey-2">
<span class="show-for-small-only">6 col</span>
<span class="show-for-medium-only">4 col</span>
<span class="show-for-large-up">1 col</span>
</div>
</div>7.3 Nesting the grid
This is an eight column section, starting with this paragraph. Below this you'll find another row with two sections.
Section (.medium_6)
This is a nested row with two six column sections.
Section (.medium_6)
This is a nested row with two six column sections.
Now the nested row has been closed, and we're back to the original eight column section.
This is an 4 column section
This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
<div class="cf push--bottom">
<div class="col large_8 bg-light-grey-1 soft border">
<p class="show-on-medium alpha push--bottom">
This is an eight column section, starting with this paragraph.
Below this you'll find another row with two sections.
</p>
<div class="row">
<div class="col medium_6 bg-light-grey-1 border push--bottom">
<img src="http://placehold.it/500x300/666666/cccccc" class="push-half--bottom">
<h3 class="alpha primary-font soft-half--sides">
Section (.medium_6)
</h3>
<p class="soft-half--sides">
This is a nested row with two six column sections.
</p>
</div>
<div class="col medium_6 bg-light-grey-1 border push--bottom">
<img src="http://placehold.it/500x300/666666/cccccc" class="push-half--bottom">
<h3 class="alpha primary-font soft-half--sides">
Section (.medium_6)
</h3>
<p class="soft-half--sides">
This is a nested row with two six column sections.
</p>
</div>
</div>
<p class="alpha push--bottom">
Now the nested row has been closed, and we're back to the original eight column section.
</p>
</div>
<div class="col large_4 bg-light-grey-1 soft border">
<p class="alpha">
This is an 4 column section
</p>
<div class="row">
<div class="col small_4 border">
<img src="http://placehold.it/150x90/666666/cccccc">
</div>
<div class="col small_8 border">
<p class="gamma">
This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
</p>
</div>
</div>
</div>
</div>7.3 Customising the grid
Grid system
_grid.scss contains a repsonive grid. The default settings are 12 columns and 100% full width.
Each set of columns must be contained in a wrapper. Each column width is created by adding classes to the element. One class to declare this is a column class="col", and successive classes depending on columns required at small, medium, large and xlarge screen sizes eg class="col medium_6 large_4 xlarge_3"
Each set of columns must be contained in a wrapper. Each column width is created by adding classes to the element. One class to declare this is a column class="col", and successive classes depending on size required at small, medium, large and xlarge screen sizes eg class="col medium_6 large_4 xlarge_3"
Nesting the grid.
A .row class must be applied to the containing element of the nested columns.
Customising the grid.
_grid.scss contains default variables which you can freely override to suit the project layout requirements.
$column-width: 70px$gutter-width: 30px$columns: 12
These pixel values are then converted to the appropriate percentage values.
Screen sizes
$medium:48em;(768px)$large:60em;(960px)$xlarge:90em;(1440px)