Fluid Skinning System (FSS)
Join the infusion-users mailing list and ask your questions there.
Overview
The Fluid Skinning System is a modular CSS framework: a group of CSS files with a specially designed structure and class-specific format. The modular format allows you to add, remove, and mix classes to get the desired effect.
With FSS and User Interface Options, you can:
- control the appearance of your website using pre-existing modular CSS classes,
- support user-customization of the appearance of a website or Infusion components,
- deliver a look-and-feel for Infusion components
- and much more.
Features
The FSS offers:
- Wrappers and containers for quickly laying out your page, including fixed- and flexible-width columns
- Convenience classnames to quickly and easily create GUI elements such as tabs, menues, etc.
- Convenience classnames for basic font handling, such asfont family, size, and formatting
- Theming
- Accessibility support, including
- easy page linearization
- tested for useabiltity effectiveness, specifically colorblindness
- works with Assistive Technologies, specifically with off-screen AT readable content
Why Use FSS?
In addition to making it easy to lay out your websites, FSS is designed to work with the Infusion (Floe) UI Options (2008-2009) component to allow users to personalize the display of content to their own individual needs. This empowers users with visual or mobility impairments, for example, to alter the colour schemes or layout, enabling them to access content that otherwise might be completely inaccessible to them.
Getting Started With FSS
The FSS is intended to be used as the basis for your website, extended and customized by your own styles. The short-version of how to use FSS is:
- Include the FSS
.css
files you want, in the right order, ahead of your own.css
file(s). - Add FSS classes to your mark-up, ahead of your own class names
- If desired, override or extend any FSS classes as needed.
A slightly longer version of how to use FSS is provided in the sections below. For more details on the specific classes available in the FSS, see the FSS Cheat Sheet page.
1. Including FSS files
FSS includes several separate files, each providing particular functionality:
fss-reset-global.css
orfss-reset-context.css
: new in v1.4 normalize visual discrepancies between browsers. Optional, but recommended. (For earlier versions, usefss-reset.css
.)fss-reset-global.css
: Theglobal
file will affect the entire page.fss-reset-context.css
: Changes are scoped to thefl-reset
class.
fss-base-global.css
orfss-base-context.css
: new in v1.4 applies a default set of styles. O