Git Product home page Git Product logo

newaeonweb / responsiveboilerplate Goto Github PK

View Code? Open in Web Editor NEW
245.0 30.0 50.0 2.77 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

CSS 77.67% JavaScript 22.33%

responsiveboilerplate's Introduction

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

responsiveboilerplate's People

Contributors

arthurfigueiredo avatar newaeonweb avatar tarciozemel avatar wibron avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

responsiveboilerplate's Issues

[enhancement] Add missing bower.json.

Hey, maintainer(s) of newaeonweb/responsiveboilerplate!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library newaeonweb/responsiveboilerplate is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "newaeonweb/responsiveboilerplate",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Move SublimeText snippets in different Project

There is pretty much no point in keeping your boilerplate and the snippets in the same repository.
The boilerplate should be a starting point for the developer, deleting the snippet folder ever time the developer creates a new project is kinda missing the point of a boilerplate.

Linking the ST snippet's repository to the description should be good enough for the newcomers to notice...

Less fails to compile responsiveboilerplate.less

When I try to compile boilerplate.less with the Koala GUI I get the error bellow:

C:\Users\xxx\Desktop\layout\responsiveboilerplate-2.3.4\less\responsiveboilerplate.less
ParseError: Unrecognised input in C:\Users\xxx\Desktop\layout\responsiveboilerplate-2.3.4\less\gridcolumns.less:44:1
43 //Fluid Engine Generator
44 .fluidRbgrid (@RbfluidgridColumnWidth, @RbfluidgridGutterWidth) {
45

I get similar errors with other GUI for Windows

Doesn't work

Just downloaded from the website,

Followed the instructions, I just get a "reset" html page with any content showing as times font left aligned.

I even copied the html from the example page and inserted that, same result. No columns, just left aligned text with a small margin.

Checked permissions, tried locally, and on a server.

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.