Responsive Boilerplate v2.3.4
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: 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>
- 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:
To see the demo page running on localhost:
This command will open your default browser with the demo page.
- if you are on Windows use:
Please welcome. Feel free to test, use, fork, send bugs, suggestions and contribute with code to improve this tool.