.wiki-content h4 {
 background:transparent;
}
.wiki-content h3 {
  padding:5px;
}
.api {
  border:1px solid #ccc;
  border-collapse:collapse;
  clear:both;
  width:100%;
 }

.api th,
.wiki-content .api tr th{
  border:1px solid #ccc;
  background:#f4f4f4;
  padding:5px;
  text-align:center;
  table-layout:fixed;
 }

.api td,
.wiki-content .api tr td {
  border:1px solid #ccc;
  padding:5px;
  vertical-align:top;
 }

.api tr td:nth-child(1),
.api tr td:nth-child(4) {
  font-family:monospace;
 }

.api tr td:nth-child(1) {  width:150px; }
.api tr td:nth-child(2) {  width:400px; }
.api tr td:nth-child(3) {  width:150px; }

Introduction

The Fluid Skinning System (FSS) 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 (Floe) UI Options (2008-2009) component.

This page describes the FSS classnames and what they do, when to use them, and how to extend them. This page is intended as a reference only. See Fluid Skinning System (FSS) for an overview of the FSS and how to use it, and see the examples and walkthroughs for specific examples of the various classes in use.

<hr style="clear:both;" />

Class Names By Function

Layout

File: fss-layout.css : Basic layout structures.
This section requires an understanding of inheritance.

Container Widths

These are general classes that will affect the width of whatever element they are applied to. They can be used in conjunction with the column container classes (described below) to control the width of the column container.

Class Name

Description

Notes

Variants

fl-container-*
(fixed widths)

Forces an element to be a certain width (eg. 100 = 100px)

 

100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000
e.g. fl-container-900

fl-container-*
(relative widths)

Used to create flexible-width containers that depend on the width of their parents (eg. flex25 = 25% of its parent's width)

fl-container-auto defaults to the full width of its parent. fl-container has no effect on inline elements

auto, flex, flex25, flex30, flex33, flex50
e.g. fl-container-flex33
New in v1.4: flex1-flex99 i.e. every number, providing widths from 1% to 99%
e.g. fl-container-flex57

Columns

The classes can be used to compose multiple <div> s into adjacent columns. For examples of common column layouts, see the columns examples pages.

Equal width columns

Class Name

Description

Notes

Variants

fl-col-flex*

Identifies the container for equal width columns (eg. flex2 = 2 columns). Columns have flexible widths & gutters, and depend on the parents width

 

flex2, flex3, flex4, flex5
e.g. fl-col-flex3

fl-col

identifies a column container within an fl-col-flex* system

 

 

Mixed width columns

These styles can be used to create a two or more column layout with at least one fixed-width column on the left and a flexible width column on the right.

Class Name

Description

Notes

Variants

fl-col-mixed-*

Identifies the container for the mixed width columns. Allows for combinations of fl-col-flex and fl-col-fixed for complex layouts and includes gutters and padding

The fixed width columns will have the width specified by this class (see Variants). You can have as many fixed-width columns as you like, but they will all be the same width.

100, 150, 200, 250, 300
e.g. fl-col-mixed-250

fl-col-fixed

In a mixed column setup, identifies the fixed column(s).

requires fl-force-left on at least one of the fixed-width columns, and fl-force-left or fl-force-right on others, for alignment; must be placed before fl-col-flex columns

 

fl-col-flex

In a mixed column setup, identifies the flexible column. used when the fixed-width column is forced left. Note that you can only have one flexible-width column in this setup.

must be placed after any fl-col-fixed columns

 

New in v1.4:
fl-col-flex-left

In a mixed column setup, identifies a flexible column that is left-aligned. used when the fixed-width column is forced right. Note that you can only have one flexible-width column in this setup.

must be placed after any fl-col-fixed columns

 

Tabs

These classes can be used to style a list into a tab layout. The markup for the tabs must be a list, and the list items must have anchors. The anchors act as the tabs.

Class Name

Description

Notes

Variants

fl-tabs

Identifies the container of the tabs (i.e. the <ul> element).

 

 

fl-tabs-*

Aligns tabs. Use in addition to fl-tabs. (Default is center)

 

left, right, center
e.g. fl-tabs-left

fl-tabs-active

Identifies the currently active tab; Will most often be adjusted programmatically, in response to user actions.

Must be added to the active <li> and not the <a>

 

Menu

These classes can be used to style a list into a vertical navigation menu. The markup for the tabs must be a list, and the list items must have anchors.

Class Name

Description

Notes

fl-list-menu

Identifies the container of the vertical navigation menu (i.e. the <ul> element).

 

New in v1.4:
fl-activemenu

Identifies the currently active menu item; Will most often be adjusted programmatically, in response to user actions.

Must be added to the active <li> and not the <a>

Grid

These classes can be used to create a grid layour for list items and images. The default grid item height is 150px. The markup must be a list. List items could include <img> and/or captions.

Class Name

Description

Notes

fl-grid

Identifies the container of the grid layout (i.e. the <ul> element)

 

fl-grid-caption

Identifies an image caption.

Must be added to an element inside the <li>. It is absolutely positioned, so it will always appear on top of content.

Icons

This class can be used to style small icons.

Class Name

Description

Notes

fl-icon

Forces an element to have default dimensions of 16x16 pixels and hidden descriptive text.

To add the icon itself, assign it via background-image parameters

Buttons

These classes can be used to style graphics to appear as buttons.

Class Name

Description

Notes

fl-button-left
fl-button-right
fl-button-inner

Used with the FSS themes to apply background images to elements to create the appearance of a button.

Graphics can be found in the theme files, and can be overridden if desired.

Widget Template

These classes can be used to style small collections of elements that function together as a single widget in a typical layout.

Class Name

Description

Notes

fl-widget

Setup for widget template. Widgets are subdivided into 3 sections: title bar, options, and contents

 

fl-widget-titlebar

Title bar for widget, applies special styling to fl-icon and other class names

This does little on its own, it's mostly for styling sub elements

fl-widget-content

Content container

This does little on its own, it's mostly for styling sub elements

fl-widget-options

Container within fl-widget-titlebar for displaying widget options

Can hold list of anchors (like fl-tabs), or just anchors.

Forms

These classes can be used to lay out form controls and their labels. To use the form layout class names, the markup pattern looks like this (example uses centered alignment):

  <ul class="fl-controls-centered">
      <li>
          <labelElement class="fl-label">Label Text</labelElement>
          <inputControl>
      </li>
  </ul>

Class Name

Description

Notes

Variants

fl-controls-*

Align form controls and their labels

This class name goes on the container

left, right, centered
e.g. fl-controls-left

fl-label

Aligns the label according to the above mentioned class name

 

 

Progressive Enhancement

These classes can be used to show or hide elements based on whether or not JavaScript is present.

Class Name

Description

Notes

fl-progEnhance-basic

Identifies something that is meant to be the fallback if JavaScript doesn't run

Content is visible by default

fl-progEnhance-enhanced

Identifies something that is meant to be the enhanced version if JavaScript is running

Content is hidden by default. JavaScript should display this content, and hide the fallback content. This should only be applied to block-level elements.

Deprecated as of v1.4:
fl-offScreen-hidden

Used to place readable content for screen readers offscreen

See #Hiding Content below for new alternatives.

Hiding Content

These classes can be used to show or hide elements.

Class Name

Description

New in v1.4
fl-hidden

Hide for both screenreaders and browsers

New in v1.4
fl-hidden-invisible

Hide for both screenreaders and browsers but maintain layout

New in v1.4
fl-hidden-accessible

Hide for browsers but available for screenreaders

New in v1.4
fl-hidden-accessible

Hide for browsers but available for screenreaders

New in v1.4
fl-hidden-replace

Hide text for image replacement

Miscellaneous Layout Modifiers

Class Name

Description

Notes

Variants

fl-force-*

Forces an element flush to the left or right of its parent

 

left, right
e.g. fl-force-right

fl-centered

Horizontally centers an element (not text) within its parent.

forces element to be displayed as a block, requires a width

 

fl-fix

Forces an element to encapsulate its children

useful when you want a parent to match the height of its children and all the children are floating left or right

 

New in v1.4:
fl-clearfix

An alternative to fl-fix: prevents scrollbars when padding is used on elements with 100% width.

 

 

fl-push

Forces an element on its own line

useful when you don't want elements to float next to each other, like a footer after a group of columns

 

fl-layout-linear

Vertically stacks all the fss-layout class names contained within it

If an element is stubborn and doesn't linearize as expected, add fl-linearEnabled to it

 

fl-linearEnabled

See fl-layout-linear notes

 

 

Themes new in v1.1

These themes define various colour schemes that will be applied to all elements inside the identified container.

Files: fss-themes-coal.css, fss-themes-slate.css, fss-themes-mist.css, fss-themes-hc.css, fss-themes-hci.css, fss-themes-yellowBlack.css, fss-themes-blackYellow.css

Class Name

Description

Notes

Variants

fl-theme-*

Apply a color scheme to an element and all its children. Looks for FSS Layout class names in particular

Can be applied on any element, but not safely nested yet

mist, hc, hci, coal, slate
New in v1.4:
yellowBlack, blackYellow
e.g. fl-theme-hci
Note that the "rust" theme is deprecated.

fl-textfield

Used with fl-theme-* to identify text input fields.

IE6 does not recognize the selectors used for text fields (e.g. fl-theme-* input[type=text]), so you must attach this class to any text input fields.

 

fl-textarea

Used with fl-theme-* to identify textarea fields.

IE6 does not recognize the selectors used for textarea fields, so you must attach this class to any textarea fields.

 

Text

File: fss-text.css : Text manipulation

Class Name

Description

Notes

Variants

fl-font-size-*

Font height and line height.

The values represent the percentage of 1em for the font size (line height adjusted accordingly). For example, "70" will result in font size of 0.7em, "120" will result in font size of 1.2em.

70, 80, 90, 100, 110, 120, 130, 140, 150
e.g. fl-font-size-110

fl-font-spacing-*

Used to specify the spacing between text characters (eg. 0 = default spacing; 1 = 0.1em more than default).

 

0, 1, 2, 3, 4, 5, 6
e.g. fl-font-spacing-2

fl-font-serif

Used to apply a generic Serif font family to the element's text.

Attempts many common fonts, loads the first one installed on the user's system

 

fl-font-sans

Used to apply a generic Sans-Serif font family to the element's text.

Attempts many common fonts, loads the first one installed on the user's system

 

fl-font-monospace

Used to apply a generic Monospace font family to the element's text.

Attempts many common fonts, loads the first one installed on the user's system

 

fl-font-arial

Used to apply Arial font to the element's text.

 

 

fl-font-verdana

Used to apply Verdana font to the element's text.

 

 

fl-font-times

Used to apply Times or Times-like (Georgia, Times New Roman) font to the element's text.

 

 

fl-font-courier

Used to apply Courier or Courier-like (Courier New, monospace) font to the element's text.

 

 

New in v1.4:
fl-font-comic-sans

Used to apply Comic Sans MS (Comic Sans MS, sans-serif) font to the element's text.

 

 

fl-text-align-*

Aligns text (eg. left = aligns text to the left; justify = justifies text to fit the element's width).

 

left, right, center, justify
e.g. fl-text-align-justify

fl-font-*

Used to apply colours to the element's text (eg. aqua = aqua-coloured text).

 

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
e.g. fl-font-maroon

Deprecated class names

Class Name

Location

Problem

Solution

fl-caption

fss-layout.css

breaks naming conventions

use fl-grid-caption instead

fl-listmenu, fl-listmenu-active

fss-layout.css, fss-theme-*.css

breaks naming conventions

use fl-list-menu and fl-list-menu-active instead

fl-activeTab

fss-theme-*.css

breaks naming conventions

use fl-tabs-active instead

fl-noBackgroundImages

fss-layout.css

This is a UI Options required class name, and should be moved there

Migrate to UIOptions.css

fl-widget-controls

fss-layout.css

Extraneous

DELETE

fl-col-justified

fss-layout.css

Obsolete

DELETE

fl-col-side

fss-layout.css

Obsolete

DELETE

fl-col-main

fss-layout.css

Obsolete

DELETE

fl-col-mixed2 (mixed3)

fss-layout.css

Obsolete

DELETE

fl-progressive-enhancer

fss-layout.css

Obsolete

DELETE

fl-ProgEnhance-basic,
fl-ProgEnhance-enhanced

fss-layout.css

replaced by fl-progEnhance-basic and fl-progEnhance-enhanced

DELETE