« At MAX2005 | Main | Working with CSS - an Illustration »
November 03, 2005
Structuring CSS and Macromedia Labs Site Design
A few weeks ago we launched a new site - Macromedia Labs. It's a place where we can post early software releases, documentation and samples, and where developers can collaborate and contribute. You can read all about it here, but I'd like to mention a few things about the site design and how we put it together.
When we started the project the design goal was to differentiate Labs from macromedia.com, while still having it feel related. But we also wanted to keep development time to a minimum, and make it easy for the production team to build and maintain pages. So we decided to use the same basic structure as macromedia.com, use the same Dreamweaver templates, and make all the design changes via includes and CSS.
There's certainly resemblance of the labs site to macromedia.com; the rounded corners, the slight 3D look of the pods, the same body text size etc. You'll also notice some obvious differences - the colors, the style of links in the nav, etc.
Macromedia.com CSS structure
On macromedia.com, we've invested a lot of time and effort into making our CSS as modular as possible. We have a core set of sheets that most pages use, split up by the type of information they contain. For example, the general page layout is specified in this sheet, while all font and type related info is specified here. By keeping those types of information separate, we can keep attributes from being duplicated, and we only need to make updates in one place.
An example
Take a look at 2 pages from the site, the Solutions home page and the Developer Center homepage. The big difference, is the size of the right nav, but the colors, fonts, and general page designs are the same. Now take look at the stylesheets being called by each page (as an aside, we link to a stylesheet, then use @import to import other sheets)
| Page | Linked Sheet | Imported sheets |
|---|---|---|
| Solutions | mm_import.css | /css/fonts.css |
| Developer Center | portal_import.css | /css/fonts.css |
You'll notice 2 differences between mm_import.css and portal_import.css:
- portal_import.css uses imports layout_portal.css instead of layout.css
- portal_import.css does not import columns.css
This means that the styles that control the wider right nav size and the modified column width's are all contained within one sheet. And when we make a change in another sheet (for example themes.css, which contains color information), we don't have to update that in 2 places.
Back to Labs
So how does this apply to the Labs site? Look at the stylesheets that Labs uses (seen here):
http://www.macromedia.com/css/fonts.css
http://www.macromedia.com/css/master.css
http://www.macromedia.com/css/globalnav.css
http://www.macromedia.com/css/globalfooter.css
http://www.macromedia.com/css/styles.css
http://www.macromedia.com/css/layout.css
http://www.macromedia.com/css/columns.css
http://www.macromedia.com/css/image_wrappers.css
http://www.macromedia.com/css/forms.css
http://www.macromedia.com/css/data.css
http://www.macromedia.com/css/themes.css
http://www.macromedia.com/css/layout_software_final.css
/css/labs.css
All the sheets with absolute paths we're sharing with macromedia.com, and all the Labs specific styles (which in some cases override styles used on macromedia.com) are contained within one sheet. This means we can easily keep the Labs site in sync with macromedia.com, and we can use the same general site template, which makes production much easier.
On a small personal site, structuring CSS in this modular way perhaps isn't really necessary. In a lot of ways it's easier to make changes and updates when all the styles are in one place (with our setup, a particular class may have styles in 5 different sheets). But on a large site, it can be a good way to keep duplicate work to a minimum, while still giving you enough flexibility to support multiple layouts and sections - even different sites.
Posted by nstraghalis at November 3, 2005 03:06 PM
Comments
I really appreciate this blog post, I saw a site recently that used one style sheet to import others and I was a bit confused - I had never seen that done before. Now I have a bit of an idea when and why a designer would choose to use this technique.
These kinds of things are more insightful than may be perceived.
Posted by: Aaron at November 15, 2005 07:43 AM
I just wanted to say, love what you guys and girls are doing at Macromedia. It's great that you are giving us the opportunity to understand CSS used in MM.
Posted by: Angel at February 26, 2006 10:20 PM
wery god page weblog thansk
Posted by: mIRC at October 9, 2007 10:53 AM
