Cheeky is a responsive grid system built to stay out of your way. There are many great CSS frameworks already out there, but if a page uses too many of the provided styles, it runs the risk of looking like every other page using that framework. Cheeky aims to change that by providing a minimal starting point for you to run with.
Cheeky provides the basic elements needed to build a responsive, grid-based layout. You won't find fancy forms or buttons done up for you here. However, the included reset gives you a cross-browser baseline, and the grid system is simple and easy to work with.
Setting up Cheeky is easy! All you need to do is download the stylesheet and include it in your page <head>.
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="cheeky.min.css">
Everything in the Cheeky grid is contained in a responsive 1100px container with 16 columns inside rows. This gives you flexibility to design your layout exactly the way you want it.
Cheeky is built with Sass, so customizing it is as simple as changing a few variables. All of the source files are concatenated and minified using a build script, so the entire framework is only a few kilobytes.
<div class="container">
<div class="row">
<div class="span-8">Column</div>
<div class="span-8">Column</div>
</div>
</div>
Columns are defined by adding a .span-# class to an element, where # is any number between 1 and 16. You can offset columns with an additional .offset-# class to space things out a bit. Nesting is supported as well - just add an additional .row container and use the columns as normal! This page was built with Cheeky - resize the browser and check out the source to see how it all works!
Cheeky was created primarily as a learning exercise for me to practice responsive design techniques. I'm using it on my personal site, as well as a few other projects, and it's survived the initial trials thus far. All the code is on GitHub - I would love to hear any suggestions, and if you play around with Cheeky or use it on one of your projects, be sure to let me know on Twitter!