tysweezy / responsiveboilerplate

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.

Responsive Boilerplate v2.3.2

A starting point to responsive web design!

Website: http://www.responsiveboilerplate.com/

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.

Website: https://github.com/newaeonweb/ResponsiveBoilerplateSnippets

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...

The version 2.3.1 depends 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 has the latest version of node.js and npm installed.

---

• Clone our branch: https://github.com/newaeonweb/responsiveboilerplate.git
• 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>
	<div class="content">
		<div class="col4"></div>
		<div class="col4"></div>
		<div class="col4"></div>
	</div>
</div>

Note:

• 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.

Contribute

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

More Infos

www.responsiveboilerplate.com

• Developer: @newaeonweb
• Email: [e-mail]
• Google Plus: Fernando Monteiro