Child pages
  • FSS - Colors and Themes

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 20 Next »

Unknown macro: {style}

.LinksPanel

Unknown macro: {float}
Unknown macro: {div}
On This Page

Overview

This walkthrough details how to use the Themes of the Fluid Skinning System (FSS). Here, "themes" refers to the color schemes and "window dressings" for basic markup and [FSS Helpers] such as Tabs, Widgets, Menus, etc.

This walkthrough is meant as an accompaniment to the Theming Functional Demo, and not as an introduction to CSS or how it works. That information is beyond the scope of this document and can be found at the W3C.

For an in-depth article on how the FSS uses CSS and makes it modular, please see the Fluid Skinning System (FSS) introduction.

Getting Started

In order to use the FSS Theme class names, you will need to include the following files in the <head> of your document:

fluid.theme.hc.css
fluid.theme.mist.css
fluid.theme.rust.css

It is optional, though recommended, that you use a CSS "reset" file. A CSS reset file is usually a large group of basic rules to normalize the CSS differences inherent to all browsers.

There are many CSS reset files available, including YUI CSS Reset, Eric Meyers' Reset or our FSS Reset file:

fluid.reset.css

... which is based on the YUI Reset file.

This file needs to go before any other CSS data in your page.

It is highly recommended that you glance over the following walkthroughs, as they explain certain concepts in detail:

  1. [FSS Tutorials - Layout] to give you an overview of how layout in the FSS works.
  2. [FSS Tutorials - Advanced Layout] to take FSS Layout further, from simple containers to Widgets and GUI systems.

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 it or extend it.

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.

Please note: this document assumes you have already read [FSS Helpers] and [FSS Layout] articles.

Implementing Themes

So far, there are 3 shippable themes:

  1. Rust
    class="fl-theme-rust"
    
  2. High Contrast:
    class="fl-theme-hc"
    
  3. Mist
    class="fl-theme-mist"
    

To use FSS Themes, just apply the theme class name at the root level of the markup you want to theme. So, if your markup looks like:

<div id="rootContainer" class="navbar">
   <ul class="fl-listMenu">
      <li><a href="#">Nav link</a><li>
      <li><a href="#">Nav link</a><li>
      <li><a href="#">Nav link</a><li>
   </ul>
</div>

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.

Mist

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

fl-theme-mist is the classname for our soft blue theme.

Rust

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

fl-theme-rust is the class name for our cream/brown theme.

  • No labels