Versions Compared

Old Version 44

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 45

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0
Style
Wiki Markup
{style}
.wiki-content h4 {
background:transparent;
}
.wiki-content h3 {
padding:5px;
background:transparent;
}
.api {
  border:1px solid #ccc;
  border-collapse:collapse;
  clear:both;
  width:100%;
 }

.api th,
.wiki-content .api tr th{
  border:1px solid #ccc;
  background:#f4f4f4;
  padding:5px;
  text-align:center;
  table-layout:fixed;
 }

.api td,
.wiki-content .api tr td {
  border:1px solid #ccc;
  padding:5px;
  vertical-align:top;
 }

.api tr td:nth-child(1),
.api tr td:nth-child(2) {
  font-family:monospace;
 }

.api tr td:nth-child(1) {  width:150px; }
.api tr td:nth-child(2) {  width:150px; }
.api tr td:nth-child(3) {  width:400px; }
{style}
Info
titleWork In Progress

This document is a work-in-progress. This page is for documenting all Mobile FSS classnames: what they do, when to use them, and how to extend them.

Section
Column
Include Page
Infusion13:FSS Links PanelInfusion13:
FSS Links Panel
h2. Introduction

Introduction

Note:

The

Mobile

FSS

is

{color:purple}

new

in

v1.1

{color}

.

This

article

is

for

documents

all

the

Mobile

FSS

classnames

and

describes

what

they

do,

when

to

use

them,

and

how

to

extend

them.

Knowledge

of

the

core

[

FSS

Cheat

Sheet

]

is

not

required,

although

extremely

useful.

Mobile

FSS

recycles

a

large

number

of

desktop

FSS

class

names

for

the

sake

of

easy

portability.

Mobile

FSS

includes

some

new

class

names

too,

which

are

unique

in

their

usage.

While

the

desktop

and

mobile

flavours

of

FSS

are

very

similar,

there

are

some

important

differences:

#

  1. The
  1. fss-mobile-layout.css
  1. file
  1. is
  1. required.
#
  2. The
  1. fss-mobile-layout.css
  1. file
  1. has
  1. theme-specific
  1. layout
  1. adjustments.
#
  2. fss-reset.css
  1. is
  1. not
  1. as
  1. relevant
  1. on
  1. the
  1. mobile
  1. platform
  1. as
  1. it
  1. is
  1. on
  1. the
  1. desktop.
#
  2. mobile
  1. FSS
  1. relies
  1. heavily
  1. on
  1. Webkit,
  1. and
  1. is
  1. currently
  1. limited
  1. to
  1. platforms
  1. that
  1. use
  1. Webkit-based
  1. browsers
  1. (eg
  1. Android,
  1. iPhone,
  1. etc)
#
  2. Since
  1. performance
  1. on
  1. the
  1. mobile
  1. platform
  1. is
  1. very
  1. different
  1. than
  1. any
  1. other,
  1. it
  1. is
*
  1. highly
*
  1. recommended
  1. to
  1. reduce
  1. the
  1. amount
  1. of
  1. network
  1. traffice
  1. your
  1. page
  1. generates.
  1. Therefore,
  1. try
  1. not
  1. to
  1. include
  1. theme
  1. files
  1. you
  1. wont
  1. use,
  1. ie:
  1. don't
  1. push
  1. the
  1. iphone
  1. theme
  1. file
  1. to
  1. an
  1. android
  1. device
  1. if
  1. your
  1. not
  1. using
  1. it.

A

typical

mobile

FSS

setup

looks

like

{

Column
Wiki Markup
}
Code Block
fss-mobile-layout.css
fss-mobile-themeOfYourChoice.css
your-tweaks.css
{code}

...and,

as

always,

*

order

is

important

\!*

!

Wiki Markup
{html}
<hr style="clear:both">
{html}

h2. 

FSS 
 
 / 
 
 mFSS 
 
 overlapping 
 
 class 
 
 names



The 
 
 following 
 
 class 
 
 names 
 
 used 
 
 in 
 
 FSS 
 
 are 
 
 also 
 
 used 
 
 in 
 
 mobile 
 
 FSS, 
 
 with 
 
 different 
 
 effects 
 
 applied.



 Any 
 
 other 
 
 FSS 
 
 class 
 
 name 
 
 has 
 
 no 
 
 effect 
 
 unless 
 
 you 
 
 include 
 
 the 
 [FSS|
FSS
 Cheat Sheet] files.


 files.
 Wiki Markup
{table-plus:class=api}
|| Classname || Notes || Difference between FSS and mFSS ||
| .fl-container\* | | Width values are ignored, the element is indented 10px, and for the iphone it adds rounded corners to {{.fl-list-*}} children. Usage is outlined in detail in the [latest Mobile FSS demos | http://fluidproject.org/releases/1.2/demos/fss/mobile/demo.html] |
| .fl-icon | | Resizes the default dimensions for icons. Adds rounded corners. Manipulated extensively within {{.fl-list-*}} elements. Usage is outlined in detail in the [latest Mobile FSS demos | http://fluidproject.org/releases/1.2/demos/fss/mobile/demo.html] |
| .fl-label | | width is reduced to 25% from 50% |
| .fl-button | | Changes the appearance to a simple rounded button |
| .fl-button-inner | | No styling applied since it becomes redundant in modern mobile browsers. Sliding door, scalable buttons can be achieved without it.  |
| .fl-tabs | | Restyled to look more like a multipurpose cluster of elements instead of desktop OS-style tabs |
| .fl-tabs-active | | Still highlights the selected tab |
| .fl-list-menu | | list-based menus are the core navigation mechanism in mobile FSS. Usage is outlined in detail in the [latest Mobile FSS demos | http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/basic.html] |
| .fl-grid | | Grid items are much smaller, depending on other required mobile FSS class names like {{.fl-list-thumbnails and .fl-thumbnails-expanded}} |
| .fl-grid-caption | | Captions are below image and not on top |

h2. Layout


h3. Containers

{table-plus:class=api}
|| Classname || Variants || Description ||
| .fl-container\* | Fixed width variants found in [FSS|fluid:FSS API] are ignored | For the iphone, it forces a list to have round corners and content to be indented by 10px |
| .fl-table | | For making an arbitrary element display like a table |
| .fl-table-cell |  | For making an arbitrary element display like a table cell, enabling vertically alignment for children, (ie. centering things vertically) |
| .fl-table-row |  | For making an arbitrary element display like a table row |

h3. Lists
{table-plus:class=api}
|| Classname || Variants || Description ||
| .fl-list |  | Applies to a list container, formats the {{li}} as container for general purpose content [List Demo|http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/basic.html] |
| .fl-list-menu |  | Applies to a list container, formats the {{li}} and an {{a}} child as a menu of options [List Demo|http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/basic.html] |
| .fl-list-thumbnails |  | Applies to a list container, formats the {{li}} with an {{a}} child with an {{img.fl-icon}} child as a menu of options with a large graphic on the left [DEMO|http://build.fluidproject.org/infusion/demos/fss/mobile/html/nav/thumb.html]|
| .fl-icon | | When used inside an  {{.fl-list-menu}} it becomes a 30px x 30px graphic. When used within {{.fl-list-thumbnails}} it becomes a 44px x 44px thumbnail. When used within {{.fl-thumbnails-expanded}} it becomes a 64px x 64px thumbnail. {{.fl-icon}} inside and {{.fl-list}} has rounded corners and can be made "glossy" [Icon Demo| http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/icon.html] [Thumbnail Demo|http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/thumb.html] |
{table-plus}


h3. Tabs

Tabs
 Wiki Markup
{table-plus:class=api}
|| Classname || Variants || Description ||
| .fl-tabs |  | Works exactly like [FSS Tabs (scroll to the bottom)|http://fluidproject.org/releases/1.2/demos/fss/layout/demo.html] but is much more compact for smaller mobile screens [Tabs Demo|http://fluidproject.org/releases/1.2/demos/fss/mobile/html/tabs/basic.html]|
| .fl-tabs-active |  | Hilights the active tab. Class name belongs on the {{li}} element [Tabs Demo|http://fluidproject.org/releases/1.2/demos/fss/mobile/html/tabs/basic.html] |
{table-plus}


h3. Buttons

Buttons
 Wiki Markup
{table-plus:class=api}
|| Classname || Variants || Description ||
| .fl-button | .fl-button-green, .fl-button-black, .fl-button-blue, .fl-button-white | Doesn't do much on its own, but when used with the iphone/android theme (the android theme is {color:purple}new in v1.2{color}) there is a border image and translucent gradient shading applied. [Buttons Demo|http://fluidproject.org/releases/1.2/demos/fss/mobile/html/buttons/basic.html] |
{table-plus}