Blog Index

Responsive Grid System

May 31, 2017
Website Design and Development
by Vitaliy Kononov
Responsive Grid System

Make your design responsive

CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Responsive GS Features:

  • mobile first
  • 12, 16 & 24 column
  • clearfix
  • optional gutters
  • 1kb compressed
  • box-sizing polyfill
  • respond.js polyfill

[maxbutton id=”1″ url=”” text=”Download” ]

Markup Example

<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.	
	<main role="main" class="row">		
<article class="col span_8 clr">	
			Insert page content here.	
<aside role="complementary" class="col span_4 clr">
			Insert sidebar stuff here.	
<footer role="contentinfo" class="row">
		Insert footer stuff here.	

How it Works

<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]*behavior: url(/scripts/;
/* 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: */
data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
/* 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: */[/html]

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

You Might Also Like...
Jun 16, 2022

Why Bounce Rates (Really) Matter

Website Design and Development
May 19, 2022

How to Find the Right CMS

Website Design and Development
May 26, 2022

Why Updating Your Website is Now More Important Than Ever

Website Design and Development

Want to collaborate on a future-forward project?

Let's Talk

We collaborate with innovative brands to create cutting-edge digital experiences. Let's connect.