blacklabel css
In my previous article I talked about whitelabel css files. If you didn't catch it yet, I think it might be best to scan through it to get a better understanding of what this series is about. This article continues by describing what we (or I) call a blacklabel css file. Though there is some common ground with whitelabel css, it's a different beast altogether.
blacklabel wha?
Maybe it's just a silly coincidence, but these last couple of months I've been seeing quite a few projects revolving around one set of html templates with several design derivatives. Large companies seem more and more interested in consistent branding of their products and rather than build 15 different sites, they opt to build 1 with the possibility of refining each brand a little more.
The last project I did like this involved an html platform for a commune of 15 towns and cities, with the possibility to give each town/city its derivative design (based on one of two general designs). What we needed to do was to make a general css file (one for each base design actually) and overwrite the site-specific design elements in a separate css. That base css was baptized the blacklabel css.
The biggest difference with a whitelabel css is that a blacklabel css file is actually used within a live environment and is built to support the site rather than the process of building the site.
figuring things out
Rather than build one blacklabel css and copy it for each site, we figured it would be better to use one single file to which all derivative designs would link. That point of view became crucial in selecting the things that went into our blacklabel css. The most important thing to remember is that when you put something in, it will affect all derivative sites. Dangerous if you don't know what you're doing, but extremely powerful when you want to add new components or change something about an existing component while conserving consistency throughout all the derivatives.
So the idea was to build a css file that displays the whole site, framing, spacing, positioning and whatnot included, just without the visual design details. In effect, you're making a black and white copy of your general design, the coloring happening afterwards in a site-specific css file. In reality, this means that most color, font and background statements will go into the specific css while all other statements go into the blacklabel css.
finding a balance
Writing a blacklabel css is different for each project, as you have to balance your css statements between two files. While you do that, you have to keep in mind that whatever structural elements you put into your blacklabel css can be overruled in the specific css file but will mess up your overview of what happens where, and more importantly, might negatively effect any changes you make in your blacklabel css afterwards.
It is best to keep whatever is placed into your blacklabel consistent through all sites, but of course it's up to you just how far you want to take it. Another thing you have to decide is whether to add base values for colors, fonts and backgrounds into your blacklabel or leave them out and just add them to your specific css files. Leaving them out will make file sizes smaller, on the other hand it is safer to add a base design for each component, in case someone decides to add a previously unused component to a certain site and ends up with a badly designed element.
ups and downs
When using a blacklabel css, you have to plan ahead. Think hard about what you want to include and leave out beforehand, because when you mess up, it will make your life all the more miserable. Do it well and it will be a breeze to fix bugs, add new components and restyle others across all derivatives at once, without cycling through several files with the chance of forgetting one. Working with a blacklabel css greatly improves consistency when working with multiple sites based on one design and one set of html templates.
An added benefit is the ease of adding a new design to the list. All you need to do is copy one of the existing specific css files, where you will find all the css you need to make a new design derivative. It usually boils down to changing a couple of colors, images and within half a day you could have a new design derivative ready for launch.
conclusion
Blacklabel css files are cool. After working out all the specifics, I decided to try it out on my new blog (you can see the result in the second picture). The idea was to get a full reverse of colors for my backoffice. In the end, I was able to decrease my file size for the main site and put all the necessary statements to switch styles in a small admin css. Structural changes can now be made for both versions in one single file.
Think of the blacklabel css as a file that builds your house, sets all the furniture where it belongs, even hangs the picture frames on the wall. But that's where it stops. You can still choose what picture you want to hang and what color kitchen you'd like to have. Use it only when the derivate designs have minimal structural changes and when consistency is an important issue to keep multiple sites as consistent as possible with a minimum of trouble and possibility of errors.
When you use it with caution, it can be an incredibly powerful tool. Up next is an article revealing a little trick to make working with blacklabel css files even easier. Stay tuned.