Responsive Grid System

Markup Example

[html]
<div class="container row">	
<header role="banner" class="row">		
<h1 class="col span_4">Site Title</h1>		
<h2 class="col span_8">Site Description</h2>
<nav role="navigation" class="row">	
			Insert global nav here.	
		</nav>	
	</header>
	<main role="main" class="row">		
<article class="col span_8 clr">	
			Insert page content here.	
		</article>		
<aside role="complementary" class="col span_4 clr">
			Insert sidebar stuff here.	
		</aside>	
	</main>	
<footer role="contentinfo" class="row">
		Insert footer stuff here.	
	</footer>
</div>
[/html]

How it Works

[html]
<div class="container"></div>
<!-- Add this class to your page wrapper to center it to the browser window and set the width of the page. -->
<div class="row"></div>
/* Add this class to any element that spans the entire width of your 'container' to clear any floating child or 'col' elements. 
Also allows you to define spacing between rows, or add borders, etc. Using this class alone does not add gutters to 'col' elements. */
<div class="row gutters"></div>
/* Using these two classes together works the same as described above and adds gutters to 'col' elements within. 
If you don't need gutters then just use the 'row' class on its own. */
<div class="col span_4"></div>
/* The 'col' class defines each column within a 'row' and the 'span_' classes define the width of each particular column. 
These are used together as child elements of a 'row'. 
On smaller devices these elements will stack vertically unless defined otherwise in media queries. */
<div class="clr"></div>
/* Add this class to any element to clear its floating children. 
Also, 'container', 'row' and 'col' will clear floats by default. (aka - clearfix method) */
[/html]

Polyfills

[html]*behavior: url(/scripts/boxsizing.htc);
/* Responsive.gs now ships with the Box-Sizing polyfill by Christian Schaefer. 
File path must be relative to your HTML document, not relative to your CSS. More info here: https://github.com/Schepp/box-sizing-polyfill */
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
data-wp-preserve="%3Cscript%20src%3D%22%2Fscripts%2Frespond.min.js%22%3E%3C%2Fscript%3E" 
data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
/* Responsive.gs now ships with the Respond.js polyfill by Scott Jehl. 
Just link it up in the head of your site with a relative path like this example. 
More info here: https://github.com/scottjehl/Respond. */[/html]

In need of a total site redesign, ground-up build, or other extensive design work? Check out our web design company.