Skeleton Grid System

July 2nd, 2013

There are many grid systems out there and not all of them have been created equally. A few coworkers were praising Skeleton so I decided to give it a try for a quick project recently. And now after using I can say without hesitation that I hate it. The two major reasons being that its a 16 column grid and the naming scheme for the classes.

The 16 column grid introduces hacks in order to get three column designs to look right. Unlike a 12 column grid where each third is 4 columns, 16 columns need special classes to create a third. Mixing them with other column classes causes spacing issues.

Then there is the inconsistent class names. Most follow the simple formula of number of columns to span + “columns”, although single columns are represented as “one column” and the special one third and two third classes are “one-third column” and “two-third column” respectively. Keep the “column” class consistent, don’t change it to match grammar rules. That like naming your class “red” instead of “error”, its bad form.

I think the Skeleton buzz going around my office was based on the fact it was a responsive grid, but responsive CSS, especially for a grid, is trivial to implement. While Skeleton already had it implemented, I spent more time adding and removing the letter ‘s’ in my HTML than it would of taking me to convert a non-responsive grid to be responsive.