Added by Valerie Co, last edited by Justin Obara on Mar 05, 2010  (view change)

Labels:

walk-through walk-through Delete
fss fss Delete
css css Delete
demo demo Delete
Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

About the Walk-throughs

The walk-throughs describe how to use various functionality of the Fluid Skinning System (FSS) style sheets.  They provide basic examples upon which you can build on and customize to suit your sites' needs.

Learn how to customize FSS classes and override values with the Overriding FSS article.

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:

Walk-through Description Functional Demo Style Sheet
Layout Deals with the sub-division and positioning of container elements on a page Layout Functional Demo fss-layout.css
Advanced Layout Deals with convenience class names and ready-made GUI setups (ie. Tabs, Widgets, Menus, etc.) Layout Functional Demo fss-layout.css
Themes 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
Text Deals with text and header types, spacing, and sizes. Text Functional Demo fss-text.css

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 Resetand Eric Meyers' Reset. The FSS is provided with its own reset file, fss-reset.css, which is based on the YUI Reset file.

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.