Child pages
  • FSS Naming Conventions

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

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

Compare with Current View Page History

« Previous Version 15 Next »

About this page

This document will only show the basics in a condensed syntax. It is highly recommended that you review the in-depth walkthroughs and introductions for more information.

Unknown macro: {div}
On This Page

The Basics

Order of CSS files

The order of class names is anything from FSS goes first and your own custom CSS files go last, for example:

<link href="fluid.reset.css" rel="stylesheet" />
<link href="fluid.layout.css" rel="stylesheet" />
<link href="fluid.text.css" rel="stylesheet" />
<link href="fluid.themes.css" rel="stylesheet" />
<link href="fluid.states.css" rel="stylesheet" />
<link href="" rel="stylesheet" />

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

Order of Class names

The order of class names is anything from FSS goes first and your own custom class names goes last, for example:

<div class="fl-container-250 fl-font-size-110 myCustomClass"> </div>

Overriding FSS data

This is intended as a broad overview of changing FSS. All changes should be done in your sylesheet. For a more detailed explanation, please see [Overriding FSS].
To overrride any FSS you should have a selector that at the very least [matches the specificity of the FSS selector].

An example of over-riding FSS could be when you want to change a columns default width:padding:margin values.
Assuming you have an fl-col-flex3 instance somewhere you want to change. You can do this 2 ways:

  • To change this setup for all fl-col-flex3 instances, change the selector definition itself in your stylesheet (ie. copy and rewrite the .fl-col-flex3 .fl-col rules)
  • To change this setup for just one fl-col-flex3 instances, in your stylesheet you should have a selector that at the very least [matches the specificity of the FSS selector] in your stylesheet, and change the values there.

A Caveat in Overriding FSS

In some situations, we have used the !important rule to ensure things behave as intended for [UI Options]. You might be required to add this to your new rules as well.

List of class names

Please see the [FSS API] document to view all available FSS CSS convenience class names.


Contains containers, columns, basic layout management, and layout linearization class names. These class names can go on virtually any element.

Example this would make a 250 pixel wide container aligned to the right:

<div class="fl-container-250 fl-force-right">Container</a>

Example this would make 3 flexible width columns of link containers:

<div class="fl-col=flex3">
   <a class="fl-col" href="#">Big Linky column 1</a>
   <a class="fl-col" href="#">Big Linky column 2</a>
   <a class="fl-col" href="#">Big Linky column 3</a>

[Advanced Layouts]

Advanced layout mechanisms (formlery known as Helpers) are CSS class names structured in such a way to lay out widgets, tabs, menus, and other common GUI concepts. These mechanisms make certain best practice and sound markup assumptions (ie. tabs require anchors inside list items).

Example this would make a series of 3 tabs aligned to the right of the page

<ul class="fl-tabs fl-tabs-right">
   <li><a class="fl-activeTab" href="#">Big Linky column 1</a></li>
   <li><a class="fl-col" href="#">Big Linky column 2</a></li>
   <li><a class="fl-col" href="#">Big Linky column 3</a></li>



  • No labels