Page Comparison

Include Page

	Styles for FSS examples
	Styles for FSS examples

{div:class=} {div2:class=

Wiki Markup

Div

class	fl-col-mixed-150

Div

class	fl-col-fixed

fl-force-left

} {include:FSS column examples navigation} {include:FSS Links Panel} {div2} {div2:class=

Include Page

	FSS column examples navigation
	FSS column examples navigation

Include Page

	FSS Links Panel
	FSS Links Panel

Div

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

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:

]

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}

Section

Column

The mark-up and classes used to produce this layout:

Code Block

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

Column

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 Block

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

Versions Compared

Old Version 2

New Version Current

Key

Equal-width

columns,

flexible-width

container

Multi-column