One of the things I’ve heard consistently over the last few years is how people wish SMS skins were built from a single file instead of several different files.  Given the way SMS was built, that just wasn’t an option, but when I sat down to build the architecture for Nova, moving over to a single template file was a top priority.  In the big scheme of things, it doesn’t seem like a big thing, but the easier I can make it for people to skin Nova, the more skins the community will see and the more variety everyone will see  across the Internet.

Well, I managed to do exactly what I set out to do.  Nova’s skins are driven from a single template file that can be built however someone wants.  All tables?  Go for it.  Modifications of a current skin?  Easy.  Image-based layout like SMS 1?  Do it.  There’s a lot of flexibility.  But the HTML hasn’t been the hurdle people struggle to get over, it’s the CSS stuff.  I’ve had the luxury of working with CSS extensively for about 7 years now.  If something doesn’t work, I can usually fudge it until it looks right.  The majority of people skinning Nova (and SMS as well) don’t have that luxury, so it’s important to make skinning as easy as possible.  One of the ways to do that was moving everything over to a single template file, but I also had to address some of the confusion over stylesheets and today, I think a good solution landed in the trunk.

In SMS, a skin was broken up into 5 stylesheets: style-main, style-clickmenu, style-login, style-misc, style-ui.tabs.  Whew!  That’s a good chunk of stylesheets and, let’s be honest, the names are terribly descriptive of what each controls.  Usually, someone will end up combing through all 5 stylesheets trying to find one thing to change.  That’s just frustrating, especially when most of the CSS code isn’t applicable to what they’re trying to do.

Then came along the first iteration of Nova skins and not 5 stylesheets, but 7: main, display, forms, text, panel, reset and ui.tabs.  Sure, file names are a little more descriptive now, but I managed to add complication to the stylesheets by increasing the number of stylesheets you’d have to wade through to find your stuff.  Fail.  Back to the drawing board.

Over the course of Nova development, I’ve flirted with the idea of using a CSS framework because the folks putting those together are a helluva lot smarter with CSS than me.  But still, I’ve always hesitated doing that because I don’t want to force people to learn a way of building their site that conforms to a particular framework, not matter how powerful it may be.  But in the process of bombing around the Internet a few months ago, one in particular caught my attention: Objected Oriented CSS.  Now, for anyone reading who just had a mini panic attack, you can relax, because Nova isn’t using a framework, but the concept was incredibly simple.

The big draw of using an application framework for Nova was the ability to separate business logic and presentation from each other.  The Model-View-Controller paradigm is a great one, especially for web applications like Nova.  So why wouldn’t something like that work for CSS?  Nichole Sullivan, the creator of OO-CSS, argues that there’s no reason you can’t treat CSS like that.  Her ideas are awesome and I encourage you to check them out sometime, but for Nova, I wasn’t about to re-architecture skins for OO-CSS, but I borrowed a simple concept: functional separation.

When it comes to Nova’s skins, there are two main areas: structure and style.  Structure is the nuts and bolts of the CSS … width, height, margin, padding, float, outline and all the other powerful selectors that tell our stuff where to go and how to behave.  At the same time though, structure can be the most confusing stuff to understand, so let’s get it right out of the way.  For skin developers who want to mess around with that stuff, it’s there in a stylesheet called structure.  What about the rest?  The styles like colors, background colors, background images, borders, font sizes, font weights and much more that people are interested in tweaking, we’ve grouped them together in skin.css stylesheet.  That means when you want to change the color of text, you know right where to go and you won’t have to mess around with the other stuff.*  The only exception to this is that the major layout pieces of the skin are held in the skin stylesheet, effectively meaning that the majority of people looking to edit skins probably won’t have to touch the structure stylesheet at all.

This simplified approach to skinning the system should help out those folks who aren’t as comfortable with CSS but who still want to tweak their Nova skins a little bit.

* In addition, we have a ui.tabs stylesheet, but the only reason that wasn’t combined was because we offer the option to override the tab style from the Nova style to the jQuery UI style, so keeping that separate was necessary, otherwise people who wanted to do that would have to copy and paste all over the place.