Grid

A simple Mobile First Grid

Mobile First

Mobile First?

Today’s mobile device is our true personal computer: always with us, connected to the network, and filled with new capabilities for getting things done, communicating with each other, and just killing some time.


- Luke Wroblewski

so why bother with the Mobile First approach? Designing applications focused on mobile layouts first, will make your websites usable on all devices.

Yet another grid system?

The world wasn't waiting for this


Pick Me

Why another grid?

There are so many great grid systems out there. I’m not arrogant enough to believe, the world was waiting for mine. But having tested a lot of grid’s and not finding what I was looking for or having to deal with havy frameworks with to much inside, I decided to create my own.

Taking this grid as basis, you can adapt it to fit your needs.

So here's what's inside

Min-width Media Queries


Min-Width

Using the min-width media queries we only apply styles when they are needed. So we design our “mobile” layout first and then use min-width to layer complex layouts as the viewport widens.


@media (min-width: 640px) { 
	/* CSS Rules */
}

5 columns


Columns

Keeping it simple with a maximum of 5 columns. Honestly, did you ever create a website layout using more then 5 columns?

It’s lightweight, easy to use and simple to maintain.


CSS

Using the attribute selector to float all columns, then simply defining the width of each column size.


@media (min-width: 640px) { 
/* Attribute selector */
[class^='col-'] {float: left;}
/* Full width of container */
.col-full {width: 100%;}
/* Half width of container */
.col-half {width: 50%;}
/* Two-Third width of container */
.col-two-third {width: 66.7%;}
/* One-Third width of container */
.col-third {width: 33.3%;}	
/* Fourth width of container */
.col-fourth {width: 25%;}
/* Fifth width of container */
.col-fifth {width: 20%;}

Add the class "flow-right" for columns you want on the right, but should follow the natural flow of the document (sit on top) when in "mobile" view.


@media (min-width: 640px) { 
...
/* Flow right when not Mobile, but on top when mobile */
.flow-right {float:right;}
}


HTML

Using the "micro clear fix hack" by Nicolas Gallagher the rows are preventen from stacking next to each other.


<div class="row clearfix"> 
	<div class="col-half">
		<h2>half column</h2>
	</div> 
	<div class="col-half">
		<h2>half column</h2>
	</div> 
</div>
<div class="row clearfix"> 
	<div class="col-two-third flow-right">
		<h2>two-third column</h2>
	</div> 
	<div class="col-third">
		<h2>third column</h2>
	</div> 
</div>

full column

half column

half column

two-thirds column

third column

fourth column

fourth column

fourth column

fourth column

fifth column

fifth column

fifth column

fifth column

fifth column

third column flow-right

two-thirds column

Use Box-Sizing

The box-sizing CSS3 property, when using the value border-box makes our final renderd box the declared width, and any border or padding is cut inside the box.


/* Use Box-Sizing */
*, 
*:before, 
*:after {  
    margin: 0;
    padding: 0 ;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}