Child pages
  • FSS Advanced Layout - Widgets

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

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

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

My Favourite News Sites

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

My Favourite News Sites

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>
  • No labels