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>

Simple Responsive Mobile Template

I was playing about with media queries & CSS to test a responsive HTML5 template that adjusts to any device whose width is less than 960px. Its not perfect, just a first attempt. Feel free to use it if you like. You can test it on your mobile or by narrowing your browser.

View Demo»
Download»

Some features include:

View Demo»
Download»

Stick a Footer to the Bottom – HTML5

Below is some updated/streamlined code of my earlier post on how to stick a footer to the bottom of a page whose content is not sufficient to push below the fold. Its using some HTML5 features like the ‘footer’ & ‘header’ tags & lightweight doctype. I’ve embedded the CSS but you can link to an external file. It also has a script to create the HTML5 elements in older Microsoft browsers. Its been tested on modern browsers & seems to work fine….hope it helps.

<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>  
    document.createElement("footer");  
    document.createElement("header");    
</script>
<![endif]-->
<style>
    body, html{ height:100%; margin:0; }
    .wrapper{ min-height:100%; }
    header{ height:100px; background:#CCC; overflow:auto; display:block; }
    .content{ padding-bottom: 100px; }
    footer{ height: 100px; width:100%; background:#CCC; margin-top:-100px; display:block; }
</style>
</head>

<body>

    <div class="wrapper">

         <header>This is my header!</header>
         <div class="content">This is my content!</div>

    </div><!--end wrapper-->

    <footer>This is my footer!</footer>

</body>
</html>