Added by Jacob Farber, last edited by Jacob Farber on Dec 15, 2009  (view change)

Labels:

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

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

On This Page

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 User Interface Options component.

This article is for documents all the FSS classnames and describes what they do, when to use them, and how to extend them.

Please read the brief Fluid Skinning System (FSS) primer before continuing.

Classnames By Function

Layout

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

Miscellaneous Layout Modifiers

Classname Variants Description Notes
.fl-force-* left, right Forces an element flush to the left or right of its parent  
.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
.fl-push   Forces an element on its own line usefull when you dont 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  

Container Widths

Classname Variants Description Notes
.fl-container-* 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000 Forces an element to be a certain width (eg. 100 = 100px)  
.fl-container-* auto, flex, flex25, flex30, flex33, flex50 Used to create flexible-width containers that depend on the width of their parents (eg. flex25 = 25% of its parent's width) Auto defaults to the full width of its parent. .fl-container has no effect on inline elements

Columns

Classname Variants Description Notes
.fl-col-* flex2, flex3, flex4, flex5 System for creating equal width columns (eg. flex2 = 2 columns). Columns have flexible widths & gutters,  and depend on the parents width  
.fl-col   identifies a column container within an .fl-col-flex* system  
.fl-col-mixed-* 100, 150, 200, 250, 300 System for creating mixed width columns. Allows for combinations of .fl-col-flex and .fl-col-fixed for complex layouts and includes gutters and padding  
.fl-col-fixed   In a mixed column setup, identifies the fixed columns requires .fl-force-left or .fl-force-right for alignment, and must be placed before .fl-col-flex columns
.fl-col-flex   In a mixed column setup, identifies the flexible column must be placed after any .fl-col-fixed columns

Tabs

Classname Variants Description Notes
.fl-tabs   Creates a basic tab system. Tabs are centred by default. Markup must be a list, list items must have anchors. The anchors act as tabs.
.fl-tabs-* left, right Aligns tabs left or right.  
.fl-tabs-active   Identifies the currently active tab Must be added to the active <li> and not the <a>

Menu

Classname Variants Description Notes
.fl-list-menu   Creates a basic vertical navigation menu. Markup must be a list, list items must have anchors.
.fl-list-menu-active   Identifies the currently active menu item Must be added to the active <li> and not the <a>

Grid

Classname Variants Description Notes
.fl-grid   Creates a grid-like layout for list items and images. Default grid item height is 150px. Markup must be a list. List items could include <img> and/or captions
.fl-grid-caption   Identifies the 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

Classname Variants 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

Classname Variants Description Notes
.fl-button-* left, right Decorates and element with sliding-door style graphics. Requires a secondary inner element. Graphics are applied in 2 parts: the cap and the extender. Graphics can be found in the theme files and modified.

Widget Template

Classname Variants 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

Classname Variants Description Notes
.fl-controls-* left, right, centered Align form controls and their labels  
.fl-label   Identifies the text label for form control alignment.  

Acscessibility

Classname Variants 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
.fl-offScreen-hidden   Used to place readable content for screen readers offscreen Use this class name if you have something that should only be made aware to screen readers

Themes

fss-themes-coal.css, fss-themes-slate.css, fss-themes-mist.css, fss-themes-hc.css, fss-themes-hci.css : Colorization

Classname Variants Description Notes
.fl-theme-* mist, hc, hci, coal, slate 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
.fl-textfield   Used with .fl-theme-* to stylize text fields. Selectors like .fl-theme-* input[type=text] to style this, but it's unsupported in IE6
.fl-textarea   Used with .fl-theme-* to stylize textarea fields.  

Text

fss-text.css : Text manipulation

Classname Variants Description Notes
.fl-font-size-* 70, 80, 90, 100, 110, 120, 130, 140, 150 Font height and line height. Similar to a percentage (less than 100 is smaller than normal, greater than 100 is bigger than normal) Values increment by 0.1em.
.fl-font-spacing-* 0, 1, 2, 3, 4, 5, 6 Used to specify the spacing between text characters (eg. 0 = default spacing; 1 = 0.1em more than default).  
.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.  
.fl-text-align-* left, right, center, justify Aligns text (eg. left = aligns text to the left; justify = justifies text to fit the element's width).  
.fl-font-* aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Used to apply colours to the element's text (eg. aqua = aqua-coloured text).  

Deprecated class names

Classname 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