Gridiculous – Another Responsive Grid Boilerplate
by c.bavota | Posted in Articles | 20 comments
Apr
23
2012
I know, I know. There are already quite a few responsive grid boilerplates out there. But they didn’t do exactly what I needed so I decided to create my own. I just launched the site today so head on over to http://gridiculo.us to check it out and learn more about it.
Here are 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
Version 1.0 has just been released and it could always be improved so please contribute on GitHub to help improve the code and make it a lot better.
It’s great to see more and more responsive templates. Gridiculous.
yes, Agree with you! I found a pages sad that : 960 grid / http://960.gs/
Simple yet effective, this will definitely help with an upcoming project!
I totally agree! Keep up the good work. This is the future of web design since more and more people surf the internet on smart phones and tablets. One question though: What does normalize.css do?
Hi, thanks for the new grid. I’m currently using bootstrap, so I would like to know what features this grid offers that bootstrap doesn’t.
This is a basic straightforward responsive grid boilerplate. It is just for laying out your page structure. It does not offer all the advanced styles that Bootstrap does.
look very interesting… Can we manage this in admin panel and change the website outlook as we wish?
Gridiculous is only a stylesheet for your site that allows you to create a fully responsive layout. Once it is loaded onto your page, all you need to do is follow the instructions on http://gridiculo.us/ to set up you page.
Nice, thanks this looks easier to use than a few others Ive tried… I need all the help I can get, Thanks!!
Hi,
Thanks for a great grid layout first.
We would like to use it in commercial not GPL projects. Is it possible? I’m a creator of PrimeFaces Extensions (http://code.google.com/p/primefaces-extensions/) and would like to use it for a new JSF component. But our license is Apache. Would it be possible to add MIT license as in jQiery (http://jquery.org/license/)?
Thanks in advance for your reply.
For sure. Go right ahead. I’ll add the license.
That are good news. Thanks you very much! I have two questions yet.
1) I saw you use conditional comments for IE with style classes like class=”no-js lt-ie9 lt-ie8 lt-ie7″. Do we really need this for html tag? I could not find these style classes in gridiculous.css. What they are good for?
2) Can we adjust space between columns without any side-effects? I saw you use for .c classes padding-left / padding-right: 20px. Can I simple change it to 10 px e.g.?
Regards.
Oleg.
1. Those conditional tags for IE are taken from the HTML5 Boilerplate. They are useful for using specific CSS for each iteration of IE but Gridiculous does not specifically need them to work.
2. Yes you can adjust the padding to anything you like.
I’ve looked at the site and downloaded the zip. Do you have a complete project that you started with this grid? I’d be interested in what a finished project might look like.
I just completed a WordPress theme using Gridiculous. Check out the demo site: http://demos.bavotasan.com/gridiculous/
Hi, took a look at the link gridiculo and it looks quite good. thanks.
Thanks, I took a look on several boilerplates and this one looks pretty good. I also heard a lot of good feedback so I will give it a try,