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.
Adapt to any screen size, including fluid media; images and video and pre-configured with 4 breakpoints, just to make your job easier.
Include in the package: PSD Template, HTML5 starting point file for fast development, a demo example. Also is available a Sublime Text package with a complete pack of snippets as you can read below.
Website: http://newaeonweb.github.io/Rb-ui/
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.
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 recommend reading this Website: http://www.newaeonweb.com.br/n3/ultima-versao-do-nodejs-no-ubuntu-13-04.html to install the latest version using the PPA.
- 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 the 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.
Please welcome. We do not claim to be the best, we are just trying to help an open web and free, so feel free to test, send bugs, suggestions and contribute with code to improve this tool.
screencast coming soon.
- Developer: @newaeonweb
- Email: [email protected]
- Google Plus: Fernando Monteiro