I have “skinned” or “themed” a lot of web applications over the years to include CMS’s, blog engines, and a couple collaboration applications.  Most of the time, I have a good time doing so, but the process is usually littered with a lot of issues when it comes to how the application spits out markup and how it incorporates CSS.

I started working with MindTouch Deki a couple months ago and am happy to say that I found the entire skinning experience to be quite the opposite.  When I say opposite, I mean that the process was not littered with issues, and that I found Deki to be written in a way that really made it easy for me to skin.  There are several reasons for such a good experience, and I will do my best to get to them all.

As a note, when I started working with Deki, I started with the Fiesta skin set, so there will be a few Fiesta specific points below, but for the most part it covers the general Deki Skinning model.  Okay now to the reasons for such a good skinning experience.

Solid Web Standard Markup

Almost “nuff said,” but I will say a little more.  The markup produced by Deki is written with web standards in mind.  Here are a few things I liked.

• DOCTYPE  it is there.  No quirks mode!  You would be surprised that some applications are still forgetting to include a simple DOCTYPE.
• It is not littered with tables.  The Fiesta skin uses tables only when tables are needed.  (for example: tabular data)  The Ace skin uses tables a little more than I would like, but hey it is still better than a lot of web applications out there.
• Elements are given classes.  This sounds like a no brainer, but I have worked with many applications where I could not easily style a specific div element because it did not have a class and there was no way for me style it without some very creative CSS or to give the element a class with some crazy JavaScript.

CSS Variables

There are a couple schools of thought when it comes to CSS Variables.  Some will tell you they have no part in good CSS, and some will rave about them and promote them vigorously.  I am in the middle and believe there is a time for them and a time not to use them.

With Deki skinning, they work well.  They are used in the Fiesta skins and it makes it much easier once you notice all that they effect.  For the most part I didn’t change in CSS which classes used what variables.  I found that MindTouch did a good job of using the variables in a way that promotes good design.

If you are in the school that is highly against them, you can take them out with little effort or use one of the other skin families MindTouch provides (base or ace).

Extremely Well Commented

This is mainly in reference to the Fiesta skin and is another reason I like skinning Fiesta the best.  The CSS in the Fiesta skin is very well commented.  It makes skinning 10 times easier.  A whole lot less guessing.

Templates

This might not make sense right at first, and it isn’t entirely a skinning issue, but there are many times, that I want my customer to be able to have something styled nicely within the customers area of editing.

For the most part, I lock down everything and the user is left with his or her area of responsibility.  In most web applications whether that be CMS’s, blogs, or collaboration sites, the only way a user can have something styled differently is if he or she knows a little HTML and CSS and can edit the HTML or CSS right there in the editor.

First of all that could be very scary.  I don’t want my users/customers messing with HTML or CSS.  Inevitably I end up getting a call from a user who needs me to fix the “cool” things they did in the HTML view in their editor.

Templates in Deki fix this problem.  With the skins I created, I added a text file with directions on how to use templates, HTML and CSS to be added to the Control Panel.  The user follows 4 steps to create 2 different templates that they can use in their editors.

In Conclusion

So there ya have it. You can view the skins I have created at deki.cornerpixel.net.  Once there you can view all 4 of my skins.  In each skin set I have included a text file with templates, alternate backgrounds and even fixed menus if you like that sort of thing.  You can also view four different videos showing how to install and setup the skins provided.

I based the skins off the Fiesta skin and have only made changes to the style.css file so that the skins I created should be usable in the future as long as the Fiesta skin package remain the same.  I made no edits to the php files and have commented any CSS that is used to override styles in the _content.css file.  I only did this to make it easier for the community to edit my skins.

So feel free to download the skins, use them, tweak them, and most of all enjoy them.

~MikePixel  (Michael Silva)