Skip to content
A lightweight (2kb) micro-library, elegant & minimalistic CSS3 grid system, made with only three main classes and 12 columns. It`s very easy to use and understand, pre-packed with some extra css helpers for mobile devices.
CSS JavaScript
Branch: Rb-package--be…
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

Responsive Boilerplate v2.3.4

Build Status

A starting point to responsive web design!


A lightweight (3kb) micro-library, elegant and minimalistic CSS3 grid system, made with only one container and 12 columns. It`s very easy to use and understand, pre-packed with some extra css helpers for mobile devices.

Cross Browser | Cross Device!

Adapt to any screen size, including fluid media; images and video. Pre-configured with 4 breakpoints, just to make your job easier.

Sublime Text Snippets | Grunt.js Package

Include in the package: PSD Template, HTML5 starting point file for fast development, plus a demo example. Also is available a Sublime Text Package with a complete pack of snippets as you can read below.


Low Learning Curve.

Doesn't consist of a vast amount of complex classes, spans and styles for everything even those styles that you never use. Only with 3 basic classes.

How to use

Very easy to use and understand, but a minimum knowledge of HTML & CSS must be required. Follow the steps...

From version 2.3.1 we depend on the latest version of Node.js. If you use Ubuntu 13:04 we recommend reading this: How to install the latest Node.js version using the PPA.

This tutorial assumes that you already have the latest version of node.js and npm installed.

  • Clone our branch:
  • Or you can use Bower: `bower install responsiveboilerplate`.
  • Go to directory folder(responsiveboilerplate) and execute: `npm install` to download all the dependecies.
  • We strongly recommend the use of index.html as your starting point.
  • Place your content like the example:

<!--Container Class to centralize your grid-->
<div class="container">
	<!--Content Class to align the columns-->
	<div class="content">
		<div class="col6"></div>
		<div class="col6"></div>
	<div class="content">
		<div class="col4"></div>
		<div class="col4"></div>
		<div class="col4"></div>


  • This code on render display a side by side column, ie your screen with two equal column on top, and three columns on bottom.
  • You can play with your columns to fit your needs and adjust to your own design.
  • Visit our screencast page.

Quick start with Grunt.js

After cloning or install with bower, go to the root folder and execute the following command:

npm install

To see the demo page running on localhost:

grunt demo

This command will open your default browser with the demo page.


  • if you are on Windows use: grunt.cmd demo


Please welcome. Feel free to test, use, fork, send bugs, suggestions and contribute with code to improve this tool.

More Infos

Bitdeli Badge

You can’t perform that action at this time.