The 8.05.2 release of MindTouch Deki has a many noticeable improvements, particularly regarding skinning template targeting. Additionally, 8.05.2 shipped with a fairly drastic series of updates to the most popular MindTouch Deki skinning template, Fiesta. The updates were introduced to increase skinning efficiency, to provide a better CSS file structure and to reduce the CSS filesize and load time.

Architectural Changes

Prior to 8.05.2 Fiesta utilized two main CSS files, _common.css which was located in the Fiesta directory and style.css which was located in the skins’ directory (i.e. grazing green, charcoal forest, etc). _common.css was used for all of the structural CSS (padding, width, margin, etc) and style.css was used for all of the style CSS (font, color, etc). Because each skin had its own copy of style.css there were 1,000’s of lines of CSS that were often redundant and updating a global feature involved making a change to multiple copies of style.css.

To remedy this problem I’ve added a new file called _style.css which is located in the Fiesta directory and contains all of the redundant style CSS (font, color, etc). I’ve also altered the style.css in the skins’ directory to contain only the differentiator elements such as link colors, background images etc.

Now, the skins’ style.css only contains about 400 lines of CSS as opposed to 4,000 formerly. Please refer to the Filesystem Structure documentation for more information.

Skinning Variables

Although reducing the CSS makes skinning MindTouch Deki much easier I saw another opportunity for improvement by utilizing CSS variables. By using CSS variables I was able to completely consolidate the vast majority of the skinning experience into about 30 lines. Of course you can still alter the other CSS and images as needed.

Please refer to the CSS variables documentation for more information.

Table Of Contents

One of the major frustrations of skinning Fiesta was caused by the CSS organization, or lack there of. To fix this frustration each of the primary CSS files ( _common.css, _style.css and style.css ) have been re-organized, consolidated and given a table of contents. The table of contents is structured based on the Fiesta Markup Structure and is consistent throughout each of the CSS files.

Reduced Selectors

If you attempted to skin MindTouch Deki you probably experienced some of the extremely lengthy CSS selectors. For instance elements were targeted by using the following CSS:

html body div.body div.page div.pageContentFrame {...}

Using such long selectors has proven to be heavy on the browser load time and also very cumbersome for altering. Given these reasons I’ve reduced the selectors to be similar to the following CSS:

.body .pageContentFrame {...}

By reducing the selectors I have eliminated some unnecessary CSS and also eased the maintenance process.

I hope you can benefit from the latest Fiesta updates and I will continue to improve the Fiesta skinning templates. If you’re interested in contributing please visit the Fiesta Documentation

Thanks

Damien
DamienH[at]mindtouch[dot]com

categories: MindTouch