- Introduction
- Tech Docs:
- Walk-throughs:
- CSS References:
Join the infusion-users mailing list and ask your questions there.
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.