Overview

Themes are new in v1.1.

This walk-through accompanies the FSS: Themes Functional Demo in describing how to used the Themes functionality of the Fluid Skinning System (FSS). Here, "themes" refer to the color schemes and "window dressings" for basic markup and FSS Helpers, such as Tabs, Widgets, Menus, etc. It is written under the assumption that readers have reviewed the Fluid Skinning System (FSS) introductory article and understand what the FSS is.

Please note that while Rust is still part of the FSS bundle, it has been deprecated and is no longer a supported theme

All FSS class names use the fl- prefix. In our demos, if you see other class names without this prefix they are either: complimentary CSS; overriding CSS; or specific extensions of the FSS CSS. This means if you don't like the way a certain class names behaves you can easily override or extend them.

What is a Theme?

For the FSS, a theme is a collection of color definitions used together in different ways to create a look and feel for markup. You could use a theme as a starting point to give a page a basic appearance, and you could extend FSS Themes for even more detailed and site-specific appearances.

Since this is a highly subjective area of the FSS CSS, it is very likely that you would want to customize the themes further to suit your needs. However, themes are built in a purposeful way so that they fulfill specific needs, such as; high contrast colors for the visually impaired, the resetting of italic/oblique styles to normal to avoid problems with dyslexia, the enhacement of links to stand out, and color combinations known to be comfortable to read.

Then you should put the theme on the root node here, changing it to class="fl-theme-mist navbar"

Theme Details

High Contrast Black and White

<div class="fl-theme-hc">...</div>

fl-theme-hc is the class name for our main high contrast theme, which is a collection of just black or white elements (no gray or colors). When used with FSS Helpers utility class names such as fl-icon you can enhance your content's readability and/or useability by actually manipulating content.

High Contrast Inverted Black and White

<div class="fl-theme-hci">...</div>

fl-theme-hci is the class name for our inverted high contrast theme. Again, when used with FSS Helpers utility class names such as fl-icon you can enhance your content's readability and/or useability by actually manipulating content.