It’s very important to pay attention to the layout and spacing of every element in the UI. The classes in this module provide a responsive grid for column layout, methods to manipulate the visibility of elements and classes to space elements quickly and accurately using the design system. Using a 12 column fluid grid allows us to use media queries to set breakpoints for any viewport. Columns can use different spans, be offset or hidden depending on the size of the viewport.

Grid

1.0.0

Grid example 1

This 3 column layout stacks on xs* (each column takes up full width) but on the other breakpoints it adapts to different widths.

Demo
loading example… 
<div class="row">
	<div class="col-sm-4 col-md-2 col-lg-8">
		<p>
			Column A
		</p>
	</div>

	<div class="col-sm-4 col-md-8 col-lg-2">
		<p>
			Column B
		</p>
	</div>

	<div class="col-sm-4 col-md-2 col-lg-2">
		<p>
			Column C
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 2

This 3 column layout stacks on xs* (each column takes up full width) but on the other breakpoints it adapts to different widths.

Demo
loading example… 
<div class="row">
	<div class="col-md-4">
		<p>
			Column with col-md-4
		</p>
	</div>
</div>

<div class="row">
	<div class="col-xs-4">
		<p>
			Column with col-xs-4
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 3

You can nest columns inside columns to achieve greater complexity and structure the page. In effect, each column can be sub-divided into further 12 columns. The nested columns align to their own 12 col grid based on the width of the parent column.

Demo
loading example… 
<div class="row">
	<div class="col-md-3">
		<p>
			Column A
		</p>
	</div>

	<div class="col-md-9">

		<div class="row">
			<div class="col-xs-4">
				<p>
					Nested column A
				</p>
			</div>

			<div class="col-xs-4">
				<p>
					Nested column B
				</p>
			</div>

			<div class="col-xs-4">
				<p>
					Nested column C
				</p>
			</div>
		</div>

	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 4

If a pull-right class is added to the first column it will be the top most column when stacked but displays at the far right on larger views. On xs the source order is honoured.

Demo
loading example… 
<div class="row">
	<div class="col-xs-12 col-sm-4 pull-right">
		<p>
			Column A
		</p>
	</div>

	<div class="col-xs-12 col-sm-4">
		<p>
			Column B
		</p>
	</div>

	<div class="col-xs-12 col-sm-4">
		<p>
			Column C
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 5

Columns can be offset to create empty space.

Demo
loading example… 
<div class="row">
	<div class="col-xs-12 col-sm-11 col-sm-offset-1">
		<p>
			Offset Column
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 6

Adding the hidden class will hide a column. This is useful for showing content for one view and hiding it for other views.

Demo
loading example… 
<div class="row">
	<div class="col-sm-4 hidden-xs">
		<p>
			Column A
		</p>
	</div>

	<div class="col-sm-4">
		<p>
			Column B
		</p>
	</div>

	<div class="col-sm-4">
		<p>
			Column C
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.
2.0.0

Grid example 1

This 3 column layout stacks on xs* (each column takes up full width) but on the other breakpoints it adapts to different widths.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="row">
	<div class="col-sm-4 col-md-2 col-lg-8">
		<p>
			Column A
		</p>
	</div>

	<div class="col-sm-4 col-md-8 col-lg-2">
		<p>
			Column B
		</p>
	</div>

	<div class="col-sm-4 col-md-2 col-lg-2">
		<p>
			Column C
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 2

This 3 column layout stacks on xs* (each column takes up full width) but on the other breakpoints it adapts to different widths.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="row">
	<div class="col-md-4">
		<p>
			Column with col-md-4
		</p>
	</div>
</div>

<div class="row">
	<div class="col-xs-4">
		<p>
			Column with col-xs-4
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 3

You can nest columns inside columns to achieve greater complexity and structure the page. In effect, each column can be sub-divided into further 12 columns. The nested columns align to their own 12 col grid based on the width of the parent column.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="row">
	<div class="col-md-3">
		<p>
			Column A
		</p>
	</div>

	<div class="col-md-9">

		<div class="row">
			<div class="col-xs-4">
				<p>
					Nested column A
				</p>
			</div>

			<div class="col-xs-4">
				<p>
					Nested column B
				</p>
			</div>

			<div class="col-xs-4">
				<p>
					Nested column C
				</p>
			</div>
		</div>

	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 4

If a pull-right class is added to the first column it will be the top most column when stacked but displays at the far right on larger views. On xs the source order is honoured.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="row">
	<div class="col-xs-12 col-sm-4 pull-right">
		<p>
			Column A
		</p>
	</div>

	<div class="col-xs-12 col-sm-4">
		<p>
			Column B
		</p>
	</div>

	<div class="col-xs-12 col-sm-4">
		<p>
			Column C
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 5

Columns can be offset to create empty space.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="row">
	<div class="col-xs-12 col-sm-11 col-sm-offset-1">
		<p>
			Offset Column
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Grid example 6

Adding the hidden class will hide a column. This is useful for showing content for one view and hiding it for other views.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="row">
	<div class="col-sm-4 hidden-xs">
		<p>
			Column A
		</p>
	</div>

	<div class="col-sm-4">
		<p>
			Column B
		</p>
	</div>

	<div class="col-sm-4">
		<p>
			Column C
		</p>
	</div>
</div>

LESS

The main mixin is called: _grid(WBC)
Other mixins:
  • ._grid-breakpoints() This mixin makes the breakpoints available in these four variables:
    • @screen-xs
    • @screen-sm
    • @screen-md
    • @screen-lg
  • ._grid-clearfix() This mixin contains a clearfix to contain floats.

Responsive-Margins

1.0.0

Top margins

Use these classes to add vertical spacing above elements based on the layout system. To maintain a visual rhythm and consistency in the UI we have a set of classes that use multiples of 6 when applying vertical spacing between elements. The lead visual designer will stipulate which margin to use.

Demo
loading example… 
<div class="top-margin3-xs">top-margin3-xs (18px)</div>

CSS

Modifier classes:
  • no-top-margin-xs
  • top-margin1-xs
  • top-margin2-xs
  • top-margin3-xs
  • top-margin4-xs
  • top-margin5-xs
  • top-margin6-xs
  • top-margin7-xs

LESS

The main mixin is called: _responsive-margins(WBC)

Bottom margins

Use these classes to add vertical spacing below elements based on the layout system.

Demo
loading example… 
<div class="bottom-margin3-xs">bottom-margin3-xs (18px)</div>

CSS

Modifier classes:
  • no-bottom-margin-xs
  • bottom-margin1-xs
  • bottom-margin2-xs
  • bottom-margin3-xs
  • bottom-margin4-xs
  • bottom-margin5-xs
  • bottom-margin6-xs
  • bottom-margin7-xs

LESS

The main mixin is called: _responsive-margins(WBC)
2.0.0

Top margins

Use these classes to add vertical spacing above elements based on the layout system. To maintain a visual rhythm and consistency in the UI we have a set of classes that use multiples of 6 when applying vertical spacing between elements. The lead visual designer will stipulate which margin to use.

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="top-margin3-xs">top-margin3-xs (18px)</div>

CSS

Modifier classes:
  • no-top-margin-xs
  • top-margin1-xs
  • top-margin2-xs
  • top-margin3-xs
  • top-margin4-xs
  • top-margin5-xs
  • top-margin6-xs
  • top-margin7-xs

LESS

The main mixin is called: _responsive-margins(WBC)

Bottom margins

Use these classes to add vertical spacing below elements based on the layout system.

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="bottom-margin3-xs">bottom-margin3-xs (18px)</div>

CSS

Modifier classes:
  • no-bottom-margin-xs
  • bottom-margin1-xs
  • bottom-margin2-xs
  • bottom-margin3-xs
  • bottom-margin4-xs
  • bottom-margin5-xs
  • bottom-margin6-xs
  • bottom-margin7-xs

LESS

The main mixin is called: _responsive-margins(WBC)
2.0.1

Top margins

Use these classes to add vertical spacing above elements based on the layout system. To maintain a visual rhythm and consistency in the UI we have a set of classes that use multiples of 6 when applying vertical spacing between elements. The lead visual designer will stipulate which margin to use.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • We know all people (and projects for that matter) come in all forms and variation. We love the diversity and the new insights that this brings with it. Unfortunately the responsive margins were not diverse at all only giving you seven options for spacing. We expanded it’s mind in a flower-power filled group team-building exercise and now you have all kinds of margins. ALL KINDS! (#201)
  • (We moved to a neat mixin for margins, removed the block statement and bang important.)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="top-margin3-xs">top-margin3-xs (18px)</div>

CSS

Modifier classes:
  • no-top-margin-xs
  • top-margin1-xs
  • top-margin2-xs
  • top-margin3-xs
  • top-margin4-xs
  • top-margin5-xs
  • top-margin6-xs
  • top-margin7-xs

LESS

The main mixin is called: _responsive-margins(WBC) After you called the main mixin you have access to the margin mixins: ._responsive-margins-top( 1, 6px ); and ._responsive-margins-bottom( 1, 6px ); You can call the mixins with the optional important flag to make your css more specific, however by default there is no !important appended. 

/*
 * @param  @el         {string}  Element name appendix, We use numbers
 * @param  @space      {margin}  Space for this margin, We use px
 * @param  @important  {sting}   Either omit or add 'important' to make margins important
 */

Bottom margins

Use these classes to add vertical spacing below elements based on the layout system.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • We know all people (and projects for that matter) come in all forms and variation. We love the diversity and the new insights that this brings with it. Unfortunately the responsive margins were not diverse at all only giving you seven options for spacing. We expanded it’s mind in a flower-power filled group team-building exercise and now you have all kinds of margins. ALL KINDS! (#201)
  • (We moved to a neat mixin for margins, removed the block statement and bang important.)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<div class="bottom-margin3-xs">bottom-margin3-xs (18px)</div>

CSS

Modifier classes:
  • no-bottom-margin-xs
  • bottom-margin1-xs
  • bottom-margin2-xs
  • bottom-margin3-xs
  • bottom-margin4-xs
  • bottom-margin5-xs
  • bottom-margin6-xs
  • bottom-margin7-xs

LESS

The main mixin is called: _responsive-margins(WBC) After you called the main mixin you have access to the margin mixins: ._responsive-margins-top( 1, 6px ); and ._responsive-margins-bottom( 1, 6px ); You can call the mixins with the optional important flag to make your css more specific, however by default there is no !important appended. 

/*
 * @param  @el         {string}  Element name appendix, We use numbers
 * @param  @space      {margin}  Space for this margin, We use px
 * @param  @important  {sting}   Either omit or add 'important' to make margins important
 */

Responsive-Toggles

1.0.0

Visibility classes

Responsive applications generally require some degree of content curation to accommodate small devices and viewports. One method of doing this is to simply hide non-essential content. These classes allow you to show and hide content based on media queries.

CSS

Modifier classes:
  • visible-xs-block
  • visible-sm-block
  • visible-md-block
  • visible-lg-block
  • visible-xs-inline
  • visible-sm-inline
  • visible-md-inline
  • visible-lg-inline
  • visible-xs-inline-block
  • visible-sm-inline-block
  • visible-md-inline-block
  • visible-lg-inline-block

LESS

The main mixin is called: _responsive-toggles(WBC)

Hidden classes

Responsive applications generally require some degree of content curation to accommodate small devices and viewports. One method of doing this is to simply hide non-essential content. These classes allow you to show and hide content based on media queries.

CSS

Modifier classes:
  • hidden-xs
  • hidden-sm
  • hidden-md
  • hidden-lg

LESS

The main mixin is called: _responsive-toggles(WBC)

Print classes

Use these classes to create print documents from your html content with options to specify which content is printed and which content is ignored.

CSS

Modifier classes:
  • visible-print-block
  • visible-print-inline
  • visible-print-inline-block
  • hidden-print

LESS

The main mixin is called: _responsive-toggles(WBC)
2.0.0

Visibility classes

Responsive applications generally require some degree of content curation to accommodate small devices and viewports. One method of doing this is to simply hide non-essential content. These classes allow you to show and hide content based on media queries.

CSS

Modifier classes:
  • visible-xs-block
  • visible-sm-block
  • visible-md-block
  • visible-lg-block
  • visible-xs-inline
  • visible-sm-inline
  • visible-md-inline
  • visible-lg-inline
  • visible-xs-inline-block
  • visible-sm-inline-block
  • visible-md-inline-block
  • visible-lg-inline-block

LESS

The main mixin is called: _responsive-toggles(WBC)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

Hidden classes

Responsive applications generally require some degree of content curation to accommodate small devices and viewports. One method of doing this is to simply hide non-essential content. These classes allow you to show and hide content based on media queries.

CSS

Modifier classes:
  • hidden-xs
  • hidden-sm
  • hidden-md
  • hidden-lg

LESS

The main mixin is called: _responsive-toggles(WBC)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

Print classes

Use these classes to create print documents from your html content with options to specify which content is printed and which content is ignored.

CSS

Modifier classes:
  • visible-print-block
  • visible-print-inline
  • visible-print-inline-block
  • hidden-print

LESS

The main mixin is called: _responsive-toggles(WBC)

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
2.0.1

Visibility classes

Responsive applications generally require some degree of content curation to accommodate small devices and viewports. One method of doing this is to simply hide non-essential content. These classes allow you to show and hide content based on media queries.

CSS

Modifier classes:
  • visible-xs-block
  • visible-sm-block
  • visible-md-block
  • visible-lg-block
  • visible-xs-inline
  • visible-sm-inline
  • visible-md-inline
  • visible-lg-inline
  • visible-xs-inline-block
  • visible-sm-inline-block
  • visible-md-inline-block
  • visible-lg-inline-block

LESS

The main mixin is called: _responsive-toggles(WBC)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

Hidden classes

Responsive applications generally require some degree of content curation to accommodate small devices and viewports. One method of doing this is to simply hide non-essential content. These classes allow you to show and hide content based on media queries.

CSS

Modifier classes:
  • hidden-xs
  • hidden-sm
  • hidden-md
  • hidden-lg

LESS

The main mixin is called: _responsive-toggles(WBC)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

Print classes

Use these classes to create print documents from your html content with options to specify which content is printed and which content is ignored.

CSS

Modifier classes:
  • visible-print-block
  • visible-print-inline
  • visible-print-inline-block
  • hidden-print

LESS

The main mixin is called: _responsive-toggles(WBC)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)