Mobile development doesn't have to be hard. That's why I created my latest project - Cheeky.css, a grid system that makes building responsive sites a breeze. It's more important than ever to create mobile-friendly sites, but defining a separate version or stylesheet just for handhelds is a pain. With Cheeky, you only have to style your page once, and your content will automatically scale to fit the browser width.

Using Cheeky

If you've used any grid before, the syntax will be very familiar. Cheeky is based off an 1100px grid with 16 columns contained in rows. 16 is an arbitrary number, but combined with familiar column offsets, you have the freedom to structure your content exactly how you like. To get started, everything is unsurprisingly contained in a <div class="container">. From there, you lay out your columns inside a <div class="row">, 16 to a row. Columns are defined using the syntax <div class="span-#">, where # is any number between 1 and 16. Offsets are almost identical - just toss on a class="offset-#", except that you can only offset up to 15. Let's take a look at the bare minimum example: