Child pages
  • 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.

Skip to end of metadata
Go to start of metadata

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

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.

Original three-column layout

This is the first column.
Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt.

This is the second column.
Aenean urna erat, accumsan vel porttitor vitae, blandit a magna. Phasellus nec nisl.

This is the third column.
Suspendisse vehicula quam sit amet mi venenatis quis suscipit massa porttitor.

Footer

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>

Linearized three-column layout

This is the first column.
Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt.

This is the second column.
Aenean urna erat, accumsan vel porttitor vitae, blandit a magna. Phasellus nec nisl.

This is the third column.
Suspendisse vehicula quam sit amet mi venenatis quis suscipit massa porttitor.

Footer

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>
  • No labels