kaioa.com

That's some shiny logo

CSS grid frameworks in a nutshell

There are various CSS grid frameworks, which try to make the life of front-end designers easier. There's YUI Grids, Blueprint, a bunch of other frameworks, and well, the 960 Grid System.

All those frameworks do their magic through non-semantic classes, which are added to your containers. While this sounds pretty bad, it actually isn't much of an issue in reality. Well, that is if you don't use those classes in your content. Fortunately there is very little reason to do so if you're using some kind of CMS – and if you aren't, you probably should.

Personally I happen to like the 960 one most. It's pretty minimalistic while offering enough flexibility. It's also shipped with a bunch of templates for Fireworks, Illustrator, Omni Giraffe, Photoshop, and Visio. Inkscape, however, was missing. It's time to fill that gap! :)

Template overview

• 12 and 16 column flavor
• 7 predefined grids
• all vertical guides you need (37 respective 49)
• page background is fully opaque white by default
• page border is on top of the drawing

Predefined grids

These predefined grids should take care of the most common use cases. As you've probably noticed the "g05" grid is different from the others. It's a special purpose grid, which allows you to align things with odd stroke widths (typically 1px) in a pixel perfect fashion. However, be sure to disable the guides beforehand otherwise it will be more fiddly than it needs to be.

To switch to a different grid, head over to the Document Properties dialog (top right icon). Go to "g1" and un-check the "enabled" check box. Then head over to the one you'd like to use and enable that one.

Figure 1: The predefined grids

Predefined layers

By default you'll start in "Layer 1". Below is a locked layer called "grid_12" or "grid_16" depending on the template you've chosen. This background layer shows you the location of the columns and gutters. Since that layer only contains some boring bars I rather show you an image of the layers dialog instead. ;)

Figure 2: The predefined layers

Guides with nice IDs (new)

If you drag a guide by accident you can just undo it. However, if you didn't notice it right away it might not be possible anymore. I addressed this issue by giving all guides an id, which tells you where it the guide belongs. Just double click the guide and set the value according to its ID.

Figure 3: The ID tells you where it belongs

Installation

Download the zip file and extract it to Inkscape's template directory (you can also just open it with Inkscape if you'd like to take a look first). If you're using Windows the file structure should look like this afterwards:

Inkscape
└── share
    └── templates
            960_grid_12_col.svg
            960_grid_16_col.svg
            [...]

Under Linux the templates directory is located over at "/usr/share/inkscape/templates".

After you've successfully installed the 2 template files, they will be available in the "New" sub-menu:

Figure 4: Creating a new document which uses one of the templates

Download: 960gs_inkscape_templates.zip (2kb)