Here is a Method that is Helping to Improve my CSS Framework Workflow

December 17, 2007 – 9:27 pm

As CSS frameworks gain popularity there will likely be more and more tools on the web which can help in creating base style sheets and HTML templates suited for them. But for the time being weâ��re left with mostly unusable Javascript concepts that donâ��t do more than suggest measurements for elements. Of course weâ��re all relatively new to the concepts and tools that we have available so I thought Iâ��d add my workflow to the mix to help the process along.

Select an Appropriate Framework

Iâ��ve chosen to use the Blueprint CSS framework for a couple of main reasons:

It has a heavy emphasis on typography; other frameworks fall short in this area.
Itâ��s open source. That means I can use it for my clients or current employer without running into any weird situations.

I used to use the YUI Framework exclusively and I really liked it. Theyâ��ve done an exceptional job at compressing their CSS libraries and the documentation is SUPERB. I didnâ��t like all the extraneous JavaScript libraries, although Iâ��m sure theyâ��re very useful.

The point here is that you need to select a framework thatâ��s right for your needs. Smashing Magazine has an excellent write-up on the various CSS frameworks.

My Somewhat Inefficient 6-Step Workflow

Over the past couple of years Iâ��ve developed a workflow that fits the technology. As I mentioned in the introduction, there is still a lot to be desired in the way of reset, layout and typography generators for CSS frameworks. They are also, in my opinion, non-semantic for the most part. CSS classes such as column and container are all well and good, but when you start adding classes like span-4 and pull-1 you are essentially defining the presentational elements within the HTML, which is a no no.

As such, Iâ��ve had to adapt my workflow to remove these non-semantic classes from the HTML and put their corresponding styles into the style sheets. This basically renders any grid CSS redundantâ��itâ��s merely a reference at this point, but still useful for the beginning stages of template development.

1. Mark up template with framework classes: This is the real source of my inefficiency when it comes to developing a solid template to work with. Of course I could skip this step and just start putting the right styles directly into the base style sheet but I like to try it out first just to make sure it's going to work.
2. Make sure it works in all browsers: I am currently testing for Internet Explorer 5.05, 6, and 7, Firefox 2, Opera 9, and Safari 3. There can be a little bit of overlap in this step due to browser inconsistencies. If there is a problem that the framework doesn't resolve I'll add it to the base style sheet at this point until everything is right.
3. Extrapolate styles from template classes to base style sheet: And here's the bottle neck. It takes a long time to cross reference the grid CSS and then copy it into the base style sheet. I don't like doing this, but to me it seems like the only way to get the non-semantic stuff out of the HTML.
4. Add style sheet links to template: At this point I'm finally starting to get to the good stuff. With all of the layout style info added to the base style sheet I'm now able to add the references to the framework styles (excluding the grid CSS) and give it a whirl.
5. Add overrides and custom styles to base style sheet: Now that the foundation for the template is in place I've got a nicely formatted layout with pretty typography and a nice baseline grid. But the site is bare. So I've got to go through and add the graphic elements to the style sheet, override any ugly type, and generally spruce everything up.
6. Retest and make adjustments: Finally done adding everything that is needed to make a nice design. But of course things always break. So it's time to check it again in all the browsers, test, retest, and make any adjustments. This has all taken me several weeks to get down but the end results are usually pretty darn good.

It is what it is, and it sure aint perfect

Itâ��s painfully obvious that this system isnâ��t ideal. But here we are, in the early stages of CSS framework development. This is what weâ��ve got to work with. Iâ��m ready to start innovating. I want to make this process simpler. I want to streamline it even more. Got any tips? How do you do it? Any ideas for speeding things up? Let me know in the comments.

Dustin Boston