All Columns Examples |
|---|
Join the infusion-users mailing list and ask your questions there.
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.
<div class="layout-demos">
<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>
</div>
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>
<div class="layout-demos">
<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>
</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>