This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of banner Go to start of banner

FSS Cheat Sheet

Skip to end of metadata

Created by Anastasia Cheetham, last modified on Apr 08, 2013

Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

NOTE: FSS is deprecated as of 1.5

FSS Documentation

Fluid Skinning System - FSS
FSS Naming Conventions
FSS Cheat Sheet
Mobile FSS Cheat Sheet

Demos: Columns
Demos: Tabs, Menus, etc.
Demos: Text
Demos: Themes

HTML and CSS Background
CSS Bugs, Gotchas

Still need help?

Join the infusion-users mailing list and ask your questions there,
or hang out in our IRC Channel.

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.

Unknown macro: {html}

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.

Unknown macro: {table-plus}

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

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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>`

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.

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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>

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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.

Unknown macro: {table-plus}

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

Unknown macro: {table-plus}

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

Unknown macro: {table-plus}

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

Unknown macro: {table-plus}

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

Unknown macro: {table-plus}

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

No labels