Updates updates...
My site has had a look and feel overhaul, courtesy of Blueprint CSS, although I’m already two versions behind. I found the process of design greatly helped by leveraging the pre-packaged structure that Blueprint give you. It also led me to sacrifice some of the notions of an absolutely rigid separation of content from style, but I found it a good fit with the idea of using a grid CSS solution, at least while in development.
For example, the Blueprint CSS layout means you specify column widths for your grid using something like:
<div class="column span-14">
which indicates that you intend to specify a div which represents a column of the grid, and it should be 14 units wide. During development of the style, I also found it a good model to follow for changing visual style. I developed a number of CSS rules to change things like background colour, font colour and other visual changes. When I wanted to try out different combinations, I’d use something like:
<div class="column span-14 bg-light">
which would be a class I could use anywhere I wanted to lighten the background colour.
The next step after you’d done some itterations through the design would be to assign id or class tags to the classes where you’ve differentiated the look, and then rename the styles to apply to them in a semantic way, rather than indicating any kind of visual styling. In some ways, I liken this step to compressing CSS down by removing redundancy characters, or flattening layers in a GIMP document. You are ending the design process, and stripping out information which isn’t required by the end result, but you’ve also made it much harder to revisit the design process and make additional changes.
I admit this last step is only a somewhat lofty goal at the moment, and I’ve put this theme up without applying it, but this is part of an ongoing rethink of CSS and HTML development. This theme is also one I intend to use on other projects, and it’s important to find a way of having a design method I can revisit frequently.