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.
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.