Page Comparison

{div2:class=fl-col-fixed fl-force-left}
{include:FSS column examples navigation}
{include:FSS Links Panel}
{div2}

{div2:class=fl-col-flex}
h2. 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 [fluid:(Floe) UI Options, A(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.

{section}
{column}
{html}
<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>
{html}

The mark-up and classes used to produce this layout:
{code:html}
<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>
{code}
{column}

{column}
{html}
<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>
{html}

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>}}):
{code:html}
<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>
{code}
{column}
{section}

{div2}