Managing CSS files in Sitecore

This article shows how you can manage CSS files in Sitecore. This is one of those techniques that I don't exactly recommend as it shouldn't really be needed, but sometimes it can be a compromise to allow front-end designers to modify CSS on the fly. One of the advantages of doing this is that having Sitecore drive your CSS means your CSS can also follow the restricted publication process allowing your CSS to change depending on the date. I was working on a site that had a "deal of the day" where each day had a different offer and that offer was reflected on the home page. This technique allowed the designer to version the home page for each day, and also version the css tweaks for each day and set up the site for the whole week in advance. On each morning we simply did a publish and the publish restrictions we'd set up on the versions meant the homepage and css reflected that day's deal.

Note that the css for the majority of the site was still handled in css files, the css that we made driven from Sitecore contained only slight modifications the designer wanted so that buttons looked different, fonts for some components were different and so on.

Design issues with Sitecore sites

When building a website most companies tend to have designers, or front-end developers, that are fairly hands-on.  Not only do they do the actual site designs but they do the html\css too and sometimes the javascript if needed, or the implementation of any javascript frameworks that are used.  It's also not unusual for this to be the company's first Sitecore solution and all of these things can create their own challenges which I'm going to talk about in this blog.  It's not all technical issues though, it often comes down to politics and people management too.

Customising wrappers

Introduction

When trying to build flexible, generic components that are highly configurable by content editors or designers, sometimes the issue of configurable wrapper element comes up.  For example I might have a text or image field, and I might want to be able to specify if it is wrapped in an h1 tag, or I might want it in an h2 tag, a div with a certain class, or maybe just a p tag will do.  Wrapping elements isn't a problem if your field is defined as a rich text field and you're selecting the styles from the toolbar; this solution is intended for fields that aren't.