Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/newaeonweb/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.
https://github.com/newaeonweb/responsiveboilerplate

Last synced: 2 days ago
JSON representation

Host: GitHub
URL: https://github.com/newaeonweb/responsiveboilerplate
Owner: newaeonweb
License: mit
Created: 2012-12-31T14:47:53.000Z (about 12 years ago)
Default Branch: Rb-package--beta-0.0.1
Last Pushed: 2014-10-28T13:43:27.000Z (about 10 years ago)
Last Synced: 2024-12-25T11:15:51.084Z (9 days ago)
Language: CSS
Homepage: www.responsiveboilerplate.com
Size: 2.71 MB
Stars: 243
Watchers: 30
Forks: 50
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT

Awesome Lists containing this project

README

        Responsive Boilerplate v2.3.4

====================

[![Build Status](https://travis-ci.org/newaeonweb/responsiveboilerplate.png?branch=Rb-package--beta-0.0.1)](https://travis-ci.org/newaeonweb/responsiveboilerplate) 

> 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](http://www.ubuntuupdates.org/ppa/chris_lea_nodejs).

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

- Developer: [@newaeonweb](https://twitter.com/@newaeonweb/ "Twitter") 

- Email: [email protected]

- Google Plus: [Fernando Monteiro](https://plus.google.com/102311871192373469721/posts/ "G +")

[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/newaeonweb/responsiveboilerplate/trend.png)](https://bitdeli.com/free "Bitdeli Badge")