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

Owned by Jacob Farber
Last updated: Apr 03, 2013 by Joanna VassVersion comment
9 min read

Deprecated

This page is currently deprecated, and will be removed shortly. For more up-to-date documentation, see the FSS Columns demos.

On This Page
FSS Documentation

Fluid Skinning System (FSS)
FSS Naming Conventions
FSS Cheat Sheet
Mobile FSS Cheat Sheet

Demos: Columns
Demos: Tabs, Menus, etc.
Demos: Text
Demos: Themes

HTML and CSS Background
CSS Bugs, Gotchas

Still need help?

Join the infusion-users mailing list and ask your questions there.

Overview

This walk-through accompanies the FSS: Layout Functional Demo in describing how to use the Layout functionality of the Fluid Skinning System (FSS). Here, "layout" refers to the sub-division and positioning of container elements on a page. This article is written under the assumption that readers have reviewed the Fluid Skinning System (FSS) introductory article and understand what the FSS is.

Learn how to customize FSS Layout classes and override values with the HTML and CSS Background article.

For more information about the walk-throughs in general, links to functional demos and FSS style sheets, please refer to FSS - Getting Started.

Incorporating the Style Sheet

In order to use the FSS helper class names, you will need to include the following files in the <head> of your document:

fss-layout.css

All FSS class names use the fl- prefix. In our demos, if you see other class names without this prefix they are either: complimentary CSS; overriding CSS; or specific extensions of the FSS CSS. This means if you don't like the way certain class names behave you could easily override or extend them.

Laying out your page

Once you have the necessary css files included in your document, the next step is subdividing your layout into grid sections. The fluid.layout.css contains only general layout information classes, which can be combined and nested to make interesting and complex layouts.

Bare bones layout

In the first example on the FSS: Layout Functional Demo page, the layout contains a main wrapper with a header container, a footer container, and some content container in the middle. As you can see, even in this bare bones example there is already 2 levels of nested containers. The markup looks like:

<div class="fl-container-750 fl-centered">
     <div class="fl-container-flex header">
          <p>This is a header</p>
     </div>
     <div class="fl-container-flex content">
          <p>This is some content</p>
     </div>
     <div class="fl-container-flex footer">
          <p>This is a footer</p>
     </div>
</div>

Here is an exploded view of what's going on:

<div class="fl-container-750 fl-centered">

"fl-container-750" is a class name that is part of a series of fixed width containers. FSS ships with some basic container widths:

  1. small containers (good for widgets, sidebars, etc): fl-container-100, fl-container-150, fl-container-200, fl-container-250, fl-container-300, fl-container-400.
  2. large containers (based on Yahoo's experience with browser viewports): fl-container-750, fl-container-950.

"fl-centered" is a class name that identifies the alignment for containers. Other options are fl-force-left or fl-force-right.

<div class="fl-container-flex header">

"fl-container-flex" is a class name that is part of a series of flexible width containers. FSS ships with some basic fluid width containers:

  1. fl-container-auto is a container with an automatic width - good for collapsing the width around content without using float.
  2. fl-container-flex is a 100% width container (adding margins or padding to this container will often lead to unwanted results like scrolling the parent container)
  3. fl-container-flex25, fl-container-flex30, fl-container-flex33, fl-container-flex50 are all different percentages widths for a container.

"header" is a class name that is used as a customization, in this case giving it a unique background color.

<div class="fl-container-flex content">

This behaves just like the header example, except we're customizing this container with the content class name.

<div class="fl-container-flex footer">

This also behaves like the header example, except we're customizing this container with the footer class name.

Please note: Any class name with the prefix "fl-container" can nest any element with the class name prefix "fl-container" as many times as you need. While it may seem tempting to repeatedly wrap elements inside containers to get any desired layout, this may not be the most efficient use of the FSS system, and there is often a more elegent solution to very deeply nested containers.

Simple column layout

In the second example, there is a main wrapper which is centered on the page. Inside this wrapper there is a header container, a footer container, and a content container which has a 5 column layout nested inside it.

The markup looks like:

<div class="fl-container-950 fl-centered">
    <div class="fl-container-flex header">
        <p>This is a header</p>
    </div>
    <div class="fl-container-flex fl-col-flex5 content">
        <div class="fl-col">
            <p> Column Content </p>
        </div>
        <div class="fl-col">
            <p> Column Content </p>
        </div>
        <div class="fl-col">
            <p> Column Content </p>
        </div>
        <div class="fl-col">
            <p> Column Content </p>
        </div>
        <div class="fl-col">
            <p> Column Content </p>
        </div>
    </div>
    <div class="fl-container-flex footer">
        <p>This is a footer</p>
    </div>
</div>

Here is an exploded view of what's going on:

<div class="fl-container-950 fl-centered">

Same effect as mentioned in the first example, but with a larger container.

<div class="fl-container-flex header">

Same thing as the first example.

<div class="fl-container-flex fl-col-flex5 content">
        <div class="fl-col">

Here is where it gets different. This content wrapper is still using the fl-container-flex class name, but the new fl-col-flex5 class name indicates this is a column wrapper. If this class name is used on a container, and a child container contains the class names fl-col then the two will work together to make a simple column layout.

The column class name system works a little differently than the container class name system, in that instead of defining a width on every element with the class name, you define the width on the parent container ( fl-col-flex5 ) and the children "know" their width. This is to help simplify their use. Using fl-col or fl-col-flexN on their own has no effect.

The column helper fl-col-flex5 is part of a series of basic flexible column width layouts, all of which use percentages for width. Percentages are also used for margin and padding to create the relative column gutters. FSS ships with the following basic fluid column layouts:

  1. fl-col-flex5 which is useful for 5 columns
  2. fl-col-flex4 which is useful for 4 columns
  3. fl-col-flex3 which is useful for 3 columns
  4. fl-col-flex2 which is useful for 2 columns

These class names are intended to go on the wrappers for the columns, and alone do not do anything without the use of fl-col on their children.

The 2nd part of the column layout system is the column class name itself, fl-col. These identify which elements are the columns to be sized and placed according to its' parent's class name ( fl-col-flex5 )

<div class="fl-container-flex footer">

Same thing as the first example.

3 Mixed column layout

The third demo showcases a mixed column layout, where 2 columns are of a fixed width and sandwich a central fluid column.

The markup looks like:

<div class="fl-container-flex">
    <div class="fl-container-flex header">
        <p>This is a header</p>
    </div>
    <div class="fl-container-flex fl-col-mixed content">
        <div class="fl-col-fixed fl-force-right">
            <p>Right Column Content</p>
        </div>
        <div class="fl-col-fixed fl-force-left">
            <p>Left Column Content</p>
        </div>
        <div class="fl-col-flex">
            <p>Center Column Content</p>
        </div>
    </div>
    <div class="fl-container-flex footer">
        <p>This is a footer</p>
    </div>
</div>

Here is an exploded view of what's going on:

<div class="fl-container-flex">

We start off with a wrapper thats flexible and the full width of the viewport.

<div class="fl-container-flex header">

Same as before, we have a full width header.

<div class="fl-container-flex fl-col-mixed content">
        <div class="fl-col-fixed fl-force-right">
        ....
        <div class="fl-col-flex">

This demo works similary to the previous one, expect we have 2 types of columns instead of just the one fl-col.
In this example we have a full width, flexible container for columns. The fl-col-mixed class name is part of a mixed flexible/fixed column layout, where you might want some columns to be of a fixed width, and others to stretch with the page. Since as of CSS 2.1 you cannot mix and match percentages with pixel values (e.g. you can't make something "100% - 200px wide"), we use a simple margin offset pattern to accomplish our goals.

For fl-col-mixed to work in your particular situation, you might have to modify the fixed column's fl-col-fixed width and adjust the flexible column's fl-col-flex margin offset to match. There will be more examples of this technique in upcoming Functional Demos.

<div class="fl-col-fixed fl-force-left">

This is the column that is a fixed width, and because of fl-force-left it will float to the left side of the wrapper.

<div class="fl-col-flex">

This is the column that is a flexible width, and because of the margin offsets it wraps nicely around the fixed columns.

Caveat

For the mixed column system to work properly, you must always put the fixed column markup ahead of the flexible column markup!

<div class="fl-container-flex footer">

And of course we have a footer to finish it all off.

Linearization: Why FSS Layout exists, and how to undo everything!

What is Linearization and why should I care?

From a CSS point of view, page linearization is the super-simplification of the layout of elements on a page - basically the dumbing down of "layout" as it was defined at the beginning of this walkthrough. You could see a very crude example of linearization on any modern web page when you turn off CSS entirely.

One reason linearization can be helpful is to make content more readable on small screens. For example, complex layouts dont ususally scale well when shrunk down to 30% of their expected size, and yet thats what happens when going from a typical desktop monitor to a hi-res smartphone. The effect worsens when using a common cellphone browser. Linearizing your content is a quick way of offering a mobile-safe layout.

Another situation linearization can be helpful is in conjunction with low-vision users. By simplifying your layout, you can exaggerate other effects such as font size without worrying about the effect it would have on the original layout.

So, how does this come back to the FSS Layout features? The FSS Layout class names are built to accomodate easy linearization. This is why the system exists in the first place. By building a site's layout using FSS Layout class names, you can use the (Floe) UI Options (2008-2009) component to greatly enhance the experience for people who have low-vision or are on mobile devices, with very little effort.

Linearized 3 Mixed column layout

The previous example showed how to make a mixed multi-column layout.

<div class="fl-container-flex fl-layout-linear">
    <div class="fl-container-flex header">
        <p>This is a header</p>
    </div>
    <div class="fl-container-flex fl-col-mixed content">
        <div class="fl-col-fixed fl-force-right">
            <p>Right Column Content</p>
        </div>
        <div class="fl-col-fixed fl-force-left">
            <p>Left Column Content</p>
        </div>
        <div class="fl-col-flex">
            <p>Center Column Content</p>
        </div>
    </div>
    <div class="fl-container-flex footer">
        <p>This is a footer</p>
    </div>
</div>

There was only one small addition to this markup: the fl-layout-linear class name. By adding this class name, the entire layout is reverted back to a basic set of rules that stack containers vertically.

The class name was placed at the root container:

<div class="fl-container-flex fl-layout-linear">

so that all the children with any layout would flatten out. This class can be put anywhere in the markup, and will only affect the element its on and its children.