Git Product home page Git Product logo

storming-ideas / responsiveboilerplate Goto Github PK

View Code? Open in Web Editor NEW

This project forked from newaeonweb/responsiveboilerplate

0.0 2.0 0.0 2.47 MB

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.

Home Page: www.responsiveboilerplate.com

License: MIT License

responsiveboilerplate's Introduction

Responsive Boilerplate v2.3.1

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 and 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, 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/

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

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

Contribute

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.

More Infos

www.responsiveboilerplate.com

screencast coming soon.

responsiveboilerplate's People

Contributors

newaeonweb avatar wibron avatar tarciozemel avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.