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.
FSS Advanced Layout - Widgets
NOTE: FSS is deprecated as of 1.5
All Advanced Layout Examples |
|---|
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>