Grids

The template comes with a grid component that can be used to quickly create responsive layouts using flexible width grids.

Example

 
 
 
 
<div class="wd-Grid--3on1">
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
</div>
<div class="grid-row">
	<div class="grid g-1-3"></div>
	<div class="grid g-1-3"></div>
	<div class="grid g-1-3"></div>
	<div class="grid g-1-1"></div>
</div>

Usage

The grid component is composed of the grid object which contains one or more grid cells.

<div class="wd-Grid">
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
</div>
<div class="grid-row">
	<div class="grid"></div>
	<div class="grid"></div>
	<div class="grid"></div>
</div>

The grid object is given the class .wd-Grid and grid cells are given the class .wd-Grid-cell.

Building on top of this you can create a variety of layouts using modifiers either on the grid object or the grid cell.

Cells

Grid cells support modifiers of the format --XofY where the grid width is represented by the fraction X/Y. So, assigning a class of class="wd-Grid-cell--1of2" will give the grid cell a 50% width relative to the grid object.

The following fractions are supported:

  • .wd-Grid-cell--1of1
  • .wd-Grid-cell--1of2
  • .wd-Grid-cell--1of3
  • .wd-Grid-cell--2of3
  • .wd-Grid-cell--1of4
  • .wd-Grid-cell--3of4
  • .wd-Grid-cell--1of5
  • .wd-Grid-cell--2of5
  • .wd-Grid-cell--3of5
  • .wd-Grid-cell--4of5
  • .grid.g-1-1
  • .grid.g-1-2
  • .grid.g-1-3
  • .grid.g-2-3
  • .grid.g-1-4
  • .grid.g-3-4
  • .grid.g-1-5
  • .grid.g-2-5
  • .grid.g-3-5
  • .grid.g-4-5

Layouts

Applying a modifier on every cell to specify its width can get quite cumbersome. That's why the component comes with a number of grid object modifiers that will apply certain preset layouts.

The .wd-Grid--1to2 class will split the grid into 2 columns with a 1:2 ratio.

 
 
<div class="wd-Grid--1to2">
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
</div>

The following preset layouts are available:

  • .wd-Grid--1col - Split into 1 column (1 cell)
  • .wd-Grid--2col - Split into 2 columns (2 cells)
  • .wd-Grid--3col - Split into 3 columns (3 cells)
  • .wd-Grid--4col - Split into 4 columns (4 cells)
  • .wd-Grid--5col - Split into 5 columns (5 cells)
  • .wd-Grid--1to2 - Split into 2 columns with a 1:2 ratio (2 cells)
  • .wd-Grid--2to1 - Split into 2 columns with a 2:1 ratio (2 cells)
  • .wd-Grid--1to3 - Split into 2 columns with a 1:3 ratio (2 cells)
  • .wd-Grid--3to1 - Split into 2 columns with a 3:1 ratio (2 cells)
  • .wd-Grid--1to4 - Split into 2 columns with a 1:4 ratio (2 cells)
  • .wd-Grid--4to1 - Split into 2 columns with a 4:1 ratio (2 cells)
  • .wd-Grid--2to3 - Split into 2 columns with a 2:3 ratio (2 cells)
  • .wd-Grid--3to2 - Split into 2 columns with a 3:2 ratio (2 cells)
  • .wd-Grid--3on1 - Split into 3 columns stacked on top of 1 column (4 cells)
  • .wd-Grid--fitToFill - Split into 2 columns with a fit:fill ratio (2 cells)

The .wd-Grid--fitToFill class will split the grid into 2 columns with a fit:fill ratio.

This cell will fit to the content
This cell will fill the rest of the grid
<div class="wd-Grid--fitToFill">
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
</div>

Alignment

You can control the alignment of grid cells by using the following modifiers:

  • .wd-Grid--alignBottom - Bottom align grid cells
  • .wd-Grid--alignCenter - Center align grid cells (horizontally)
  • .wd-Grid--alignMiddle - Middle align grid cells (vertically)
  • .wd-Grid--alignRight - Right align grid cells

The .wd-Grid--alignBottom class will bottom align the child grid cells.

 

 
 
<div class="wd-Grid--1to2 wd-Grid--alignBottom">
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
</div>

Reverse Order

You can reverse the order that cells are displayed by using the --reverse modifier on the grid object.

The .wd-Grid--reverse class show the cells in right-to-left order.

First cell
Second cell
<div class="wd-Grid--1to2 wd-Grid--reverse">
	<div class="wd-Grid-cell">First cell</div>
	<div class="wd-Grid-cell">Second cell</div>
</div>

IE8 Support

Grid layouts make use of the :nth-child selector which is not available in Internet Explorer 8. If you'd like to support IE8 you must add the class .wd-Grid-cell--N to each cell where N is the functional equivalent of the :nth-child selector.

The .wd-Grid--1to2 requires 2 cells so we will number the cells accordingly for IE8 support.

 
 
 
 
<div class="wd-Grid--1to2">
	<div class="wd-Grid-cell wd-Grid-cell--1"></div>
	<div class="wd-Grid-cell wd-Grid-cell--2"></div>
	<div class="wd-Grid-cell wd-Grid-cell--1"></div>
	<div class="wd-Grid-cell wd-Grid-cell--2"></div>
</div>

Responsive

The grid layouts also come in responsive flavors. So, if you wanted a grid to have a different layout on a tablet vs on a desktop, it's as easy as adding another class to the grid object.

The .wd-Grid--4col class will split the grid into 4 columns on a desktop. The .wd-Grid--2colTablet class will split the grid into 2 columns on a tablet. The .wd-Grid--2colPhone class will keep the grid split into 2 columns on a phone.

 
 
 
 
<div class="wd-Grid--4col wd-Grid--2colTablet wd-Grid--2colPhone">
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
	<div class="wd-Grid-cell"></div>
</div>

Simply add Tablet, Phone, or Print to the grid layout classes to target those viewports.

Four views are supported: Desktop (default), Tablet, Phone, and Print. The following table illustrates the grid behavior across these views.

Phones
≥ 320px and < 720px
Tablets
≥ 720px
Desktops
≥ 980px
Large Devices
≥ 1300px
Print
 
Default Grid Behavior
.wd-Grid--XXX
Vertical (Single column) Horizontal (Multi column)
Tablet Grid Behavior
.wd-Grid--XXXTablet
Vertical (Single column) Horizontal (Multi column) Vertical (Single column)
Phone Grid Behavior
.wd-Grid--XXXPhone
Horizontal (Multi column) Vertical (Single column)
Print Grid Behavior
.wd-Grid--XXXPrint
Vertical (Single column) Horizontal (Multi column)
Max container width None/Device width (fluid) None/Device width (fluid) 960px 1260px None (fluid)
Gutter 10px 20px

Breakpoints

The template comes with 3 default breakpoints. The breakpoints affect the main container's width and the placement of the navigation pane.

The first breakpoint width is 1300px. Above this point, the container will take on a fixed width of 1260px and will not expand any further. This is meant for large desktop devices.

Devices below the first breakpoint will cause the container to snap back to a width of 960px. This is meant for regular desktops (1024x768 monitors). The layout maintains this fixed width until the second breakpoint which is 980px.

After the second breakpoint, the layout goes into the tablet view with a fluid width container. The tablet view is maintained until the next breakpoint which is 720px.

From here on the template enters the mobile view with a fluid width container and a minimum width of 320px. The navigation panel is hidden off canvas and can be toggled using the navigation button ( ) from the top menu bar.