The Simplest HTML5 & CSS3 Responsive Grid Ever

This has to be the simplest responsive grid or framework ever. Its so lightweight & can be built in minutes from scratch. No need for bloated frameworks like Twitter Bootstrap.

DEMO

It uses (only) 2 new CSS3 features:

  1. box-sizing
  2. calc()

The ‘box-sizing‘ property should by now be familiar to every front-end developer by now. It forces the browser to include one or more of the padding, border & margin in the specified height and/or width. For example we’ve set our height to 100px, padding to 10px & a border of 1 pixel below.

.box{
	height:100px;
	border:1px solid #CCC;
	padding:10px;
	box-sizing:border-box;
}

Usually, the css box-model would create a box covering a total height of 122px (100px height, 10px by 2 padding for the top & bottom & 1px x 2 for the border top & bottom). With ‘box-sizing’ set to ‘border-box’ the total height is set to 100px, therefore the area available for content is 78px;

The ‘calc()‘ unit value calculator allows us to calculate values by mixing multiple unit types, in our case its percentages & pixels but you can use any css values. These can be added, subtracted, multiplied or divided. The declaration would look something like this:

width:calc(100% - 20px)

Lets say the element in question is in a container 1000px wide, the element would be 980px wide.

box-sizing‘ can be used in this way on Chrome, Firefox (with vendor prefix), Safari, Opera & IE8+
calc()‘ can be used with Chrome, Firefox, Safari (with vendor prefix), Opera & IE9+

The demo below demonstrates the technique with 4, 3, 2 & 1 columns with 2 break points. On desktop it responds at 480px & on iPad it can be demo-ed successfully by rotating the device from landscape to portrait or vice versa.

DEMO
View Source

Irish County Datalist & html5 input

Here is a simple HTML5 input & datalist containing all 32 counties in Ireland suitable for an address form. A datalist is used to ‘autocomplete’ a predefined set of values.

It is fully supported in modern versions of Google Chrome, Firefox & Opera. IE 10+ is very buggy & should not be relied upon but it degrades gracefully to a text input.

DEMO

<input name="counties" list="counties" placeholder="County" required>
<datalist id="counties">
<option value="Antrim">
<option value="Armagh">
<option value="Carlow">
<option value="Cavan">
<option value="Clare">
<option value="Cork">
<option value="Derry">
<option value="Donegal">
<option value="Down">
<option value="Dublin">
<option value="Fermanagh">
<option value="Galway">
<option value="Kerry">
<option value="Kildare">
<option value="Kilkenny">
<option value="Laois">
<option value="Leitrim">
<option value="Limerick">
<option value="Longford">
<option value="Louth">
<option value="Mayo">
<option value="Meath">
<option value="Monaghan">
<option value="Offaly">
<option value="Roscommon">
<option value="Sligo">
<option value="Tipperary">
<option value="Tyrone">
<option value="Waterford">
<option value="Westmeath">
<option value="Wexford">
<option value="Wicklow">
</datalist>