/
FSS Columns - Linearization

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.

FSS Columns - Linearization

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">