In my Modular CSS article I documented the possibility of breaking down stylesheets into components that could be reused across projects. All well and good. The next logical step is to extend this to become a CSS framework, allowing rapid development of sites with pre-written and tested components. All that's really required to produce this is a set of naming conventions and a flexible base template...
Who is this for?
If you've been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I'm trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I've not attempted to explain the layouts included here so it may not be suitable if you're a CSS beginner. Sorry about that... Feel free to dissect them yourself if you're interested; I've kept them as simple as possible.
How many layouts are there?
Well, loads but the majority of them fall into rough groups. Any framework must account for the most common layouts, otherwise it'll never get used.
* Vertical navigation with one content column
* Vertical navigation with two columns of content
* Horizontal navigation with one content column
* Horizontal navigation with 2 columns of content
* Horizontal navigation with local navigation and one column of content
* Horizontal navigation with local navigation and 2 columns of content
These 6 cover most of the blogs out there and most of the corporate sites as well. How can we structure a document so that it'll be useful in all 6 of these scenarios?
What are the common elements?
Malarkey had a shot at pinning down websites' common elements and giving them names a while back but I want something a little more general so that the building blocks can be retasked without slipping their labelling.
So... what are the common building blocks in the above 6 layouts?
* Header
* Footer
* Main content
* Sub content
* Main nav
* Local nav
These elements are used mix and match across most sites you visit so these are the constituent elements that any framework will have to cater for. No designs will use all of them but most will use header, footer, main content and main nav with optional sub content and sub nav.
The ideal structure
For me the most important single aspect of accessibility is the source code order: if it makes sense you're well on your way to building an accessible site.
You can't spent much time on the accessibility mailing lists or forums without someone being told that they should structure their HTML so that the content preceeds the navigation. This stops screenreader users from having to sit through the site's navigation every time they travel to a new page. You can get around this with skip links but that's an extra link to follow...
So, in an ideal world, how would we structure our websites?
1. Header
2. Main content
3. Sub content
4. Local nav
5. Main nav
6. Footer
This source order follows the exact structure people are expected to want: once they have read/listened to the content of your page they are most likely to want to navigate within the current section or to related pages. After they have worked their way through those they'll probably want another section of your site so the main navigation follows.
The page structure
This page structure above looks something like this when turned into (X)HTML:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The magic of CSS
We're going to need some farily advanced CSS tricks to turn this source order into useful layouts. They all have to be flexible, to account for text resizing, which with the footer rules out absolute positioning...
The eureka moment for me was when Dunstan published his absolutely positioned menu technique as part of his Mozilla Europe work. Suddenly it became possible, using an incredibly sneaky trick, to pull the nav bar from the bottom of the source and use it horizontally in the header and still allow for text resizing. Now that's genius.
Then you've got the negative margin tricks for moving floats around. I first came across these when Ryan Brill posted about them on Mezzoblue... Dead handy.
If we're going to use floated layouts we're going to need some way of clearing the contents. I could put clearing divs into each of my elements but there is the black magic clearfix method by Tony Aslett that will do this for me, keeping the source clean.
A few other things that might come in handy:
* Body ids to switch styles
* Display: inline to cure IE's double float bug
See where I'm going with this?
We have a single, flexible source document that will take a variety of content and a load of CSS techniques to manipulate them... To make this framework useful I have to be able to get my single source document to display as any of the common layouts listed above. Once that's done I'll be able to drop any content into the HTML framework, plug in the appropriate layout stylesheet for the design, tweak it and the job will be done. No more rewriting XHTML and CSS for every project; every time I start I will begin work with a solid foundation that I can tweak to fit the specifics of the job. Startup time will be next to nothing.
Back to our five main layouts
Okay, so the source code is fixed. What we want is to be able to plug in tried and tested layout stylesheets for reuse on future projects. I'm going to stick with fixed width layouts for this because they're simpler but using negative margins we could get these fluid with a bit of extra work.
* Vertical navigation with one content column
* Vertical navigation with two columns of content
* Horizontal navigation with one content column
* Horizontal navigation with 2 columns of content
* Horizontal navigation with local navigation and one column of content
* Horizontal navigation with local navigation and 2 columns of content
Achieved: Level 2!
That's it - all the common layouts done with pluggable stylesheets and ready to go. They're set up in a kind of Zen Allotment for you to have a flick through...
If you want to have a play with these yourself, all the source files are packaged up in quick-grow zip file.
30/11/2007 UPDATE: I've uploaded a slightly updated version of the framework. Very little has changed but a few people have voiced concerns over the lack of a formal license. Taking advice from Paul Jones (thanks!) I've added the new BSD terms, which are about as open as they come. I'm happy for people to use the framework for whatever they want. If you do, please drop me a line - I'd love to see what you come up with!
0 comments:
Post a Comment