Contextual CSS

One of the major benefits of using Cascading Style Sheets (CSS) to control site-wide layout is that simply by changing the CSS file, you can change the look and feel of the entire site. You only need to look at the CSS Zen Garden to understand the power this grants us as designers and developers.

The ISS Web Team have recently worked with the Enterprise and Knowledge Transfer Unit (EKT) to redevelop and redesign their Business and Enterprise site within the new University Content Management System.

This project was challenging in that the EKT wanted to provide 4 seperate ‘microsites’, which apart from having specific content targeted to differing audiences, would also have their own inherent theme through differing images and colour schemes. This is usually achieved easily if we have complete control over the HTML markup and can assign CSS ID’s to the element on the individual pages, however our CMS controls the HTML markup, and doesn’t allow us this convenience. Luckily, our CMS does grant us the flexibility to develop the visual layer (layout, colour, images) in much the same way as I would develop this on a non-CMS site.

To deliver alternate CSS to specific sections of the website is relatively trivial, the complexity comes when you have the same content in different contexts. Take, for example, the ‘Events’ section of the EKT site. The events functionality is an inbuilt component of the CMS, and is made available to all areas of the site. In the case of EKT, the user can view events from within the microsite context (for example, to just see staff-related events) so the events pages need to be displayed with the microsite-specific theme, of which there are many. The events can also be viewed from a site-wide context (for example, viewing all events), which also requires some layout changes to cope with the absence of secondary navigation.

To achieve this mixture of contexts, our CSS is structured as follows:

Contextual CSS Structure for EKT Site

As you can see from the above diagram, there are 6 different contexts in which the Events module can be viewed, each of which requires it’s own colourscheme and imagery. Admittedly this is a simple implementation of Contextual CSS, but there is the potential and ability for each context to have completely different layouts to each other.

Because the HTML markup is slightly different within the microsite context, but is the same across microsites, we have a ‘common’ stylesheet which is invoked through the @import rule, allowing us to seperate common CSS rules and make maintaining the CSS easier by not duplicating the same rules across the microsite styles. The ‘microsite theme’ stylesheets are relatively small, only containing rules affecting colour and imagery.
for this variation.

comments powered by Disqus