RSS feedVictor Lombardi’s article on integrating CSS with Content Management Systems (via Step Two Designs) provides an interesting use case for provision of CSS editing for CMS users. However in our experience, CSS just isn’t that abstracted enough from the content to be useful for anything but the most simplistic style changes.
In a moderately complex CMS, page construction is a dynamic process, meaning that layout tends to be quite generic, so the presentation may be used across multiple sections of the site. This can at times be a fairly limiting requirement, and actually conflicts with the precise nature of CSS, so much so that we’ve already resigned to the fact that CSS2 is a fairly flawed if not inappropriate technical solution for dynamic/generic presentation.
Let us break down a dynamically constructed CMS page, in this case a page from one of our old company web sites. The diagram at right shows a page constructed by our Sytadel product, overlayed with colour coding for the main wire framed areas of the site. We refer to sections of content on a page as “boxes”, which is very similar to the flat CSS box model, but in Sytadel’s case, the boxes are hierarchical.
The key to dynamic page construction, is understanding the need for hierarchical page templates. In the example diagram, first we have a default site branding, which consists of the red header, the purple footer, and the left multi-coloured context box. Many technologists think a header and a footer solves the branding problem, but this doesn’t give your designers much flexibility. You typically need some type of high level template within which you can drop your page design and your generic content. In many cases this looks as if it is a simple header and footer, but underneath it isnt.
Once the branding is applied, the next level down is the main content layout, which in this example is the parent box for the blue, pink and orange boxes. Inside this is the blue content item box, containing what we call the primary item for the page, and the pink and orange item context boxes, presenting information appropriate for or related to the primary item.
Inside the left side context box, is another box which I’ve placed inside a solid red border. This is roughly at the fourth level down inside the page’s construction hierarchy, and contains various content creation, editing and maintenance tools.
This quite simple dynamic page, when modelled, has a fairly complex tree structure, and contains about 60 different views on various items from the CMS. There are full content views, like in the blue box, summary views of items, like in the orange and green boxes and at the bottom of the blue box, hyperlink views like in the red header, and even drop down control views in the light blue box.
I should add that with this type of construction, it is actually the primary item for the page which dictates the entire construction logic and ordering, not the page itself, and that the layout for each level needs to be defined in construction logic so that it may be reused, and not just through a standard CSS definition.
With all this genericism, how on earth do you apply CSS to layout and style? Well, Sytadel’s construction engine also builds inline ID and CLASS attributes for each box and each view of an item in a box. This way you can specify the style of a title of an item for example, when it is inside a hyperlink view, which is inside a content creation box, which is inside a left context box, which is inside a page layout box, which is inside a particular branding. Want to change how it looks to a particular user or group of users? Same idea, but just a little more complex.
This places a lot of the implementation upon CSS’ shoulders for layout and cascading, and unfortunately due to the still limited browser support for the more useful CSS2 features, and the flat-flow design of CSS, the design of these stylesheets can be fairly complex if you want them to be.
The initial design for Sytadel was of a complex generic and hierarchical page construction engine, where you can place views of items inside items ad infinitum. A great use for this is with thumbnailing of content. Mark a box with font-size: 0.6em and you suddenly have a way to thumbnail entire HTML items, and in Sytadel’s case we can even embed pages within pages, all CSS controlled through cascading.
CSS is designed to be applied by designers who know exactly what is contained within the page. Thus CSS styles are great for static sites, or for dynamic pages where most if not all pages have exactly the same layout or limited construction hierarchy. With dynamic sites however, CSS doesn’t really cut it, and certainly not for regular or even admin users to edit simple stylesheets.
Let’s be honest, changing the style of an H1 container isn’t really a particularly useful function for a CMS, and is probably more likely available for CMS expectance/compliance reasons than anything else.
Update: I’ve written a follow up to this post, The limits of CSS for dynamic page construction — explained, which goes into some more detail about why this is a problem.
(Originally posted to Synop weblog)