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 Columns - Linearization
- Anastasia Cheetham
NOTE: FSS is deprecated as of 1.5
Join the infusion-users mailing list and ask your questions there,
or hang out in our  IRC Channel.
Equal-width columns, flexible-width container
Multi-column layouts very often look terrible on a small screen (like a mobile phone). As well, multi-column layouts can be difficult to read for users with low vision, or some cognitive impairments.
By using the FSS classes to create multi-column layouts, you will automatically be able to support linearization: converting multiple columns into a single column. The FSS offers a class – fl-layout-linear – that, when applied to the container of a multi-column layout, will automatically linearize it. The addition of the class can be carried out programmatically based on the context (e.g. identification of the user's device, or processing of a user's personal preferences). This way, the layout of your content can be customized when needed, without requiring you to sacrifice the multi-column layout for users who want it. The Infusion (Floe) UI Options (2008-2009) component provides an interface for users to express these kinds of interface preferences, and is designed to work with FSS.
NOTE: The background colours on this page have been added to help the reader recognize the different regions of the demo. They are not provided by the FSS.
The mark-up and classes used to produce this layout:
<div class="fl-container-flex80 fl-centered">
<div class="fl-fix">
<h3>Original three-column layout</h3>
</div>
<div class="fl-col-flex3">
<div class="fl-col">
<p>This is the first column.<br/>
Aliquam erat volutpat. Aliquam consequat,
quam at varius tincidunt.</p>
</div>
<div class="fl-col">
<p>This is the second column.<br/>
Aenean urna erat, accumsan vel porttitor
vitae, blandit a magna. Phasellus
nec nisl.</p>
</div>
<div class="fl-col">
<p>This is the third column.<br/>
Suspendisse vehicula quam sit
amet mi venenatis quis suscipit
massa porttitor.</p>
</div>
</div>
<div class="fl-push">Footer</div>
</div>
The mark-up and classes used to produce this layout (NOTE that the only difference is the addition of the fl-layout-linear class on the outer container <div>):
<div class="fl-layout-linear fl-container-flex80 fl-centered">
<div class="fl-fix">
<h3>Linearized three-column layout</h3>
</div>
<div class="fl-col-flex3">
<div class="fl-col">
<p>This is the first column.<br/>
Aliquam erat volutpat. Aliquam consequat,
quam at varius tincidunt.</p>
</div>
<div class="fl-col">
<p>This is the second column.<br/>
Aenean urna erat, accumsan vel porttitor
vitae, blandit a magna. Phasellus
nec nisl.</p>
</div>
<div class="fl-col">
<p>This is the third column.<br/>
Suspendisse vehicula quam sit
amet mi venenatis quis suscipit
massa porttitor.</p>
</div>
</div>
<div class="fl-push">Footer</div>
</div>