Lightweight %-based Responsive CSS Template

This template is created to provide a CSS structure for a very lightweight* %-based responsive website. It was created with simplicity and minimalism in mind so that it can act as a plug-n-play template for designers and developers.

*Compare Bootstrap's CSS/JS size of ~175KB to lightbase's ~16KB.

Another CSS Framework? Why use it?

4 reasons:

1 - Simplicity

It's extremely lightweight & simple to use. Simply create a parent <div class="row"> and give the children divs a class of col-x-x and you're good to go.

2 - Size

Lightbase-css is TINY - with a total size of only about 16KB! There is no extra bloat, no extra styling and almost no JS*. This makes it a great bare-bones template for designers / developers.

3 - Responsiveness

As viewport size adjusts and columns shrink, they hit certain thresholds and split to 2 or 3 rows so that content is never "crushed". Resize the browser and try it out.

4 - Browser Support

It supports IE7 & IE8... something I haven't seen in any other CSS template or framework and it sucks becuase my current client requires IE7 support :/

There are plenty of CSS templates and frameworks out there and they all have their strong and weak points. This one is different because it's been created to be as simple and lightweight as possible.

*I use HTML5shiv and Respond.js to make this work in IE8 and below.

Structure

To create four 25% columns, simply create 4 divs with class="col-1-4". For 75% and 25% columns, create 2 divs with class="col-3-4" and class="col-1-4". Make sense?

All grids must have a parent div with class="row".

                                Standard example
                                
<div class="row">
    <div class="col-1-3">col 1</div>
    <div class="col-1-3">col 2</div>
    <div class="col-1-3">col 3</div>
</div>

                                
                                
                                Nesting example
                                
<div class="row">
    <div class="col-2-3">
        col 1
        <div class="row">
            <div class="col-1-2">col 1-1</div>
            <div class="col-1-2">col 1-2</div>
        </div>
    </div>
    <div class="col-1-3">
        col 2
    </div>
</div>

                                
                            

Grid Example

.col-1-2

.col-1-3

.col-1-4

.col-1-5

.col-1-8

.col-3-4

.col-1-4

.col-2-3

.col-1-3

.col-golden-large (golden ratio - 62%)

.col-golden-small (golden ratio - 38%)

nesting - column 1 (66%)

column 1-1 (50%)

column 1-2 (50%)

column 2 (33%)

Image Example

Recommended Use

My suggestion is to first download lightbase-css, then...

Go to initializr.com and choose 'Classic H5BP'
Make sure to choose "Modernizr" or "Just HTML5shiv" AND check "Respond"
Choose whatever options you'd like and download
Open up your initializr download and in index.html, remove <link rel="stylesheet" href="css/normalize.min.css">
Replace /css/main.css with your lightbase main.css
Now you can use the lightbase index.html as a guide for how the grid system works

This will allow you to choose several options via initializr and it will make sure you have the latest jQuery/modernizr/html5shiv/etc.

Note that jQuery is not required for lightbase-css to work. You can remove it from your index.html file if you don't plan on using it.

Credit

Most concepts applied on here are borrowed ideas from other brilliant people...

The class="col-x-x" structure is a modified idea created by Chris Coyier (Don't Overthink It Grids). Modifications to his idea include adding support for IE7 and allowing for column margins.

I'm using a slightly modified version of Nicolas Gallagher and Johnathan Neal's Normalize.css and several concepts are borrowed from HTML5 Boilerplate and Jonathan Verrecchia's Responsive Initializr.

Please don't sue me.

Browser Support

The grid supports IE7 and up; and that includes all modern browsers (obviously). IE7 support is provided using respond.js, html5shiv and some crazy css conditionals that I created. It's not 100% perfect in IE7, it's pretty close and getting there was a pain in the ass, so deal with it :)

Notes

Make sure that HTML5shiv and Respond.js are up to date! If you didn't start with initializr, visit the respond.js and html5shiv sites (links above) and update the code in /js/vendor/html5-x.x-respond-x.x.x.min.js.

Changelog

01/28/2013

Changed div[class*="col-"] { } to *[class*="col-"] { } allowing columns to be applied to any element
Added clear: left; to 2nd and 3rd row on smaller screens
Added Golden Ratio columns
Added image example and max-width: 100%; on images