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 metadata
Go to start of metadata

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.

 


 

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.

 

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

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

 

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

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.

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

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.

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

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.

 

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

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.

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Icons

This class can be used to style small icons.

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Buttons

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

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Widget Template

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

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

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>

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Progressive Enhancement

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

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Hiding Content

These classes can be used to show or hide elements.

 

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Miscellaneous Layout Modifiers

 

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

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

 

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Text

File: fss-text.css : Text manipulation

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED

 

Deprecated class names

 

Error rendering macro 'table-plus'

Notify your Confluence administrator that "Bob Swift Atlassian Add-ons - Advanced Tables" requires a valid license. Reason: EXPIRED