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.

FSS - Getting Started


This page is currently deprecated, and will be removed shortly. For more up-to-date documentation, see our main FSS page and the pages it links to.

On This Page


We provide several pages that will walk the user through the FSS. The walk-throughs describe how to use various functionality of the Fluid Skinning System (FSS) style sheets. They provide basic examples you can build on and customize to suit your site's needs.

For more detailed information on how CSS is modularized and used in the FSS, please refer to the Fluid Skinning System (FSS) introductory article.

An introduction to CSS and how it works is beyond the scope of these walk-throughs and can be found at the W3C.

Files and Demos

The walk-throughs are meant to accompany functional demos that showcase available functionality of each FSS style sheet:



Functional Demo

Style Sheet


Deals with the sub-division and positioning of container elements on a page

Layout Functional Demo


Advanced Layout

Deals with convenience classes for ready-made GUI setups (ie. Tabs, Widgets, Menus, etc.)

Layout Functional Demo



Deals with colour schemes and "window dressings" for basic markup and FSS Helpers (ie. Tabs, Widgets, Menus, etc.)

Themes Functional Demo

fss-theme-mist.css fss-theme-coal.css fss-theme-slate.css fss-theme-hc.css fss-theme-hci.css


Deals with text and header types, spacing, and sizes.

Text Functional Demo


CSS Reset File: While optional, it is recommended that you use a CSS "reset" file to ensure full functionality of the FSS. A CSS reset file usually defines a large group of basic rules to normalize the CSS differences inherent in all browsers, so it would need to go before any other CSS data in your page. It is especially useful when it comes to textual content.

There are many CSS reset files available on the web, including YUI CSS Reset and Eric Meyer's Reset. The FSS is provided with its own reset and base files( fss-reset-global.css, fss-reset-context.css, fss-base-global.css, fss-base-context.css ), which are based on the YUI Reset, Base, and Fonts files. As the names suggest, the reset and base files can be used either to globally affect the styles of a page or scoped within a particular context.

Please note: All FSS class names use the fl- prefix. In the functional demos, you may find other class names without this prefix; these are used purely for demonstration purposes, and can be safely ignored.