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: 

<div class="container">
  <div class="row">
    <div class="span-8">This is 8 columns</div>
    <div class="span-4 offset-4">This is 4 columns, offset by 4!</div>
  </div>
</div>

That's all there is to it! Once you get used to working with spans and offsets, structuring your content is easy and Cheeky does all the work for you. Nested columns are totally possible as well - just stick in another row and structure nested content the same way. You can find more usage information and downloads here!

Details

As mentioned before, Cheeky's base is an 1100px grid for desktop screens. Once the browser is resized, CSS media queries are used to progressively scale the grid down to 790px and 630px (In the code, these two states are listed as 'small' and 'tiny' grids). Past that point (portrait phones and below), Cheeky reverts to displaying columns stacked on top of each other. Cheeky is built with Sass (hence the tagline. Don't be misled; it's actually very friendly), so the entire grid system can be customized and tweaked just by changing a few variables.

Tips and Tricks

I learned a great deal about grid-based design and CSS media queries writing Cheeky, and I wanted to pass on a neat Sass trick I just discovered. For example, I use a mixin called width when defining spans, which takes in an integer and uses it to calculate the correct width. I had written a bunch of code that looked like this: 

.span-1  { @include width(1); }
.span-2  { @include width(2); }
.span-3  { @include width(3); }
.span-4  { @include width(4); }
.span-5  { @include width(5); }
/*...on and on, up to 16 */

This went on and on for spans and offsets in all of the various media queries, creating a ton of repetitive code. Then I discovered that it's a perfect candidate for refactoring using a Sass loop, which reduces the example above to something like this: 

@for $i from 1 to 17 {
  .span-#{$i} { @include width($i); }
}

That by itself generates the code for 16 classes (it doesn't include the endpoint) including the proper mixin! Turns out that for is only one of the Sass control directives; if, each, and while are also included. I don't have too much experience with them yet, but you can read more about them here.

Why?

With a large number of grid systems already available, one might ask why bother writing another one. Cheeky was created entirely as a learning exercise to practice responsive design techniques, and derives much inspiration from the excellent Twitter Bootstrap project. I'm using Cheeky in production on this site (resize this window!) and several other projects, and it's held up to the task. If you'd like to read more about Cheeky, I've set up a more extensive info page here, and the project is hosted on GitHub here. Finally, if you use Cheeky in any of your projects be sure to let me know on Twitter!

Update 5/22: As pointed out in the comments, some of the media queries were causing a horizontal scrollbar at certain dimensions. The framework has since been updated to fix this issue.