NOTE: FSS is deprecated as of 1.5

All Advanced Layout Examples
Tabs
Menus
Widgets
Icons
Layout Fix

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.

Widgets

In the FSS, a "widget" is a small collection of elements grouped together in a particular, common layout. A widget typically includes a title bar, a few controls, and a content area. Typical uses of a widget might be to group together a set of website tools or favourite links in a sidebar: the content area would list the tools or links, the controls would allow users to add or perhaps sort the list, etc.

The FSS widget classes can be used to help style such a widget. They will apply layout styles to particular elements:

<h2> inside the title bar
<ul> inside the options

On their own, they don't do much more than this, but in conjunction with the FSS themes, they begin to shape the appearance of the widget.

Widget by itself

The mark-up and classes used to produce this layout:

<div class="fl-widget fl-container-250 fl-centered">
    <div class="fl-widget-titlebar">
        <h2>My Favourite News Sites</h2>
    </div>
    <div class="fl-widget-options">
        <ul>
            <li><a href="#">Add</a></li>
            <li><a href="#">Sort</a></li>
        </ul>
    </div>
    <div class="fl-widget-content">
        <ul>
            <li><a href="http://cbc.ca">CBC</a></li>
            <li><a href="http://www.nytimes.com/">NYT</a></li>
            <li><a href="http://bbc.co.uk">BBC</a></li>
        </ul>
    </div>

Widget within "mist" theme

The mark-up and classes used to produce this layout (this is identical to the code on the left, but wrapped in a single additional <div>):

<div class="fl-theme-mist fl-container-300 fl-centered">
    <div class="fl-widget fl-container-250 fl-centered">
        <div class="fl-widget-titlebar">
            <h2>My Favourite News Sites</h2>
        </div>
        <div class="fl-widget-options">
            <ul>
                <li><a href="#">Add</a></li>
                <li><a href="#">Sort</a></li>
            </ul>
        </div>
        <div class="fl-widget-content">
            <ul>
                <li><a href="http://cbc.ca">CBC</a></li>
                <li><a href="http://www.nytimes.com/">NYT</a></li>
                <li><a href="http://bbc.co.uk">BBC</a></li>
            </ul>
        </div>
    </div>
</div>

Browser not supported