Tagged CSS

When I started to put my redesign together, I spent a lot of time wading through the CSS grid systems out there. Between Bootstrap, Responsive Grid System, Zurb, and others, I couldn’t find a solution that I liked. All either used non-semantic classes or had grids that I found overly complex. In the end, I found a guide to making your own grid system and put together my own responsive grid.

The code is pretty simple, and you can easily customize it and put it at the top of your CSS file:

Another benefit of rolling your own grid system is becoming very familiar with how responsive designs work (with @media queries) and how grid systems work. To use the above grid system, it’s pretty easy:

A note about the instructions in that guide: it uses rem units to set the grid up, but that unit isn’t supported in IE 8. In my example above, I ended up switching to em instead.

After hearing much buzz about it, I decided to take CSSEdit for a test run. I don’t know — maybe I’m just stupid or something — but I couldn’t for the life of me figure out how to do anything. The only thing I could actually figure out how to do was to edit the source by hand, which I can do easily enough in TextMate.

I suppose I’ll start looking through the help readings, but I think I’m going to end up sticking with TextMate and refreshing Firefox for now.

Oh, and when I complete a declaration using the auto-complete dropdown, it adds a semicolon yet I don’t know how to get around that without using the arrow keys (moving my hand way over) or mouse (even worse). Tabbing didn’t work, but I guess this is why I never got along with TextMate’s auto-complete function for braces and parentheses either.