Grid

The rows and columns defining Hantsweb layouts

Overview

The entire template is built using a responsive 12-column HTML & CSS grid.

Rows contain columns which can utilise a number of different dimension combinations..

Numeric grids

Numeric grids divided the 12 columns into different blocks.

On larger screens, the columns sit side-by-side. On smaller screens (like a mobile phone) the columns stack on top of each in a linear flow.

Proportional grids

Proportional grids divide the row into blocks which are a percentage of 100. The proportions are maintained at all screen sizes. This is why there are fewer proportional grids.

Link grids

Link grids are specifically created to allow the common link types of:

Example
diagram showing all grid options
WCMS use

The Web Team can insert grids into any placeholder, in order to create and manage page layouts.

To insert a grid:

  1. Select a placeholder and press the option 'Add here'
  2. Browse Building Blocks > Grids and choose the type of grid you need

Numeric and proportional grids have one placeholder per column, which can contain any components.

Link grids allow only the following components:

MVC.net use
Code

Small and mobile devices (below 37.5em width) pick up these rules:

.row{
	margin:0 0 1em 0;
	padding:0;
}
.columns, .column {
	padding:0 0.5em;
	width:100%;
	position: relative;
	float: left;
	display: inline;
}
.one-quarter.column				{width: 25%; }	
.one-third.column				{width: 33%; }	
.one-half.column				{width: 50%; }	
.two-thirds.column				{width: 66%; }	
.three-quarters.column			{width: 75%; }

These rules effectively linearise all columns within the document flow, but with a few simple utility classes to be used sparingly where some proportional layout is required. Above 37.5em, the full set of column dimensions are available:

    .alpha{padding-left:0em;}
    .omega{padding-right:0em;}
    .one.column			{ width: 8.25%; 	}
    .two.columns		{ width: 16.5%; 	}
    .three.columns		{ width: 24.75%;	}
    .four.columns		{ width: 33%; 		}
    .five.columns		{ width: 41.25%;	}
    .six.columns		{ width: 49.5%; 	}
    .seven.columns		{ width: 57.75%;	}
    .eight.columns		{ width: 66%; 		}
    .nine.columns		{ width: 74.25%;	}
    .ten.columns		{ width: 82.5%; 	}
    .eleven.columns		{ width: 90.75%;	}
    .twelve.columns		{ width: 99%; 		}
     
    .offset-by-one		{ margin-left: 8.25%; 	}
    .offset-by-two		{ margin-left: 16.5%; 	}
    .offset-by-three	{ margin-left: 24.75%;	}
    .offset-by-four		{ margin-left: 33%; 	}
    .offset-by-five		{ margin-left: 41.25%;	}
    .offset-by-six		{ margin-left: 49.5%; 	}
    .offset-by-seven	{ margin-left: 57.75%;	}
    .offset-by-eight	{ margin-left: 66%; 	}
    .offset-by-nine		{ margin-left: 74.25%;	}
    .offset-by-ten		{ margin-left: 82.5%; 	}
    .offset-by-eleven	{ margin-left: 90.75%;	}
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release