Added by Jacob Farber, last edited by Anastasia Cheetham on Aug 30, 2010  (view change)

Labels:

Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.
On This Page
See Also
Still need help?

Join the infusion-users mailing list and ask your questions there.

Introduction

The Fluid Skinning System is a group of CSS files with a specially designed modular structure and class-specific format. It is meant to work well as both a standalone CSS foundation for your site and our components, and as the CSS engine of the User Interface Options component.

With FSS and User Interface Options, you can:

    * Control the appearance of your website using pre-existing modular CSS classes,
    * allow a user to control the appearance a website and/or individual Fluid components,
    * deliver a look-n-feel for Fluid components,
    * and much more.

Current Features

Currently, FSS contains:

  1. Wrappers and containers for quickly laying out your page, such as:
    • fixed or flexible columns and page containers
    • mixed column layouts
  2. Convenience classnames to quickly and easily create GUI elements such as :
    • Tabs
    • Menus
    • Icons
    • Widgets
  3. Basic font handling
    • convenience classnames for font family, size, and formatting
  4. Theming
  5. Advanced Accessbility
    • easy page linearization
    • tested for useabiltity effectiveness, specifically colorblindness
    • works with Assistive Technology, specifically with off-screen AT readable content

How FSS works

FSS is a modular CSS framework, which allows you to add, remove, and mix classes to get the desired effect. If you use FSS CSS from the onset of your website's lifecycle and plan with it in mind, then you should be able to be up and running with little effort.

It is unlikely that you will want to use the FSS alone. The idea is to use the FSS to supplement your own CSS and to reduce the effort required to get your site into production.

FSS CSS can also hook into Fluid Components and give them a basic default appearance.

FSS has four basic CSS functions: Reset, Text, Layout, and Themes (aka Color Schemes, new in v1.1);

File Order is Critical

The order of the files in your document is important!

Your declaration of FSS files should look somewhat like the following:


<link type="text/css" rel="stylesheet" href="fss-reset.css" />
<link type="text/css" rel="stylesheet" href="fss-layout.css" />
<link type="text/css" rel="stylesheet" href="fss-text.css" />
<link type="text/css" rel="stylesheet" href="fss-theme-themeName.css" />
<link type="text/css" rel="stylesheet" href="ComponentName.css" />

<link type="text/css" rel="stylesheet" href="YourStyleSheetGoesHere.css" />

The above example uses all the different FSS CSS functions like Layout and Text, plus a custom stylesheet too.

Note also that you should always put any FSS class names at the beginning of the class attribute in your html declarations.

Reset

  1. It is an easy way to normalize visual discrepancies between browsers. Completely optional.

Text

  1. Includes 
    font-size, font-family, letter-spacing, line-spacing, etc
  2. Classname example 
    .fl-font-size-150 {font-size:1.5 em}
  3. Usage example 
    <div class="fl-font-size-150"> A really big block of text</div>

Layout

  1. Includes 
    margin, padding, width, height, position, border-width, outline-width, float, etc

    and some layout helper systems too (See usage example below)

  2. Classname example 
    .fl-container-flex-30 {width:30%;}
  3. Usage example 
    <ul class="fl-tabs fl-tabs-left">
     <li>Centered Tab 1</li>
     <li>Centered Tab 2</li>
     <li>Centered Tab 3</li>
</ul>

Themes new in v1.1

  1. Includes 
    color, border-color, background-color, background-image
  2. Classname example 
    .fl-theme-rust .fl-tabs {border-color:red; color:white; background-color:maroon}
  3. Usage example 
    <body class="fl-theme-rust">
     <ul class="fl-tabs fl-tabs-centered">
          <li>Centered Tab 1</li>
          <li>Centered Tab 2</li>
          <li>Centered Tab 3</li>
     </ul>
</body>