Gridiculous starts off at 1200px and works itself down to 320px.
But also has the ability to not be locked into always having to start with 1200px.
You can even space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size.
Start things off with a tag that uses the “grid” class. I’m going to use a div for the example but it could be any tag you want:
<div class="grid"> </div> Next, add another container with the "row" class. I'll include one of the width classes in the main "grid" container so you can see what it would look like. <div class="grid w960"> <div class="row"> </div> </div> Now we can start putting together our grid. I want to create 8 columns for my main content and 4 columns for my sidebar. Adding the "end" class isn't a must though it does create a smooth right alignment edge to the row: <div class="grid w960"> <div class="row"> <div class="c12"></div> </div> <div class="row"> <div class="c8"></div> <div class="c4 end"></div> </div> <div class="row"> <div class="c12"></div> </div> Some of the main features of Gridiculous:
- Based on a twelve columns grid
- Max site widths of 1280px, 960px, 640px, 320px and full width
- Allows for nested columns
- Spacer columns available
- Fully responsive images
- Responsive typography
- Works on desktops, tablets and smart phones
- Optimized for iPads and iPhones
- Includes Normalize.css by Nicolas Gallagher and Jonathan Neal
Playing around in dreamweave with Gridiculo.us: