Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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…

README.md

Responsive Boilerplate v2.3.4

Build Status

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

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

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.

Note:

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

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

Bitdeli Badge

Something went wrong with that request. Please try again.