FSS Columns - Linearization
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.
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">