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

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 45 Next »

Work 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.

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.

Introduction

Note: The Mobile FSS is new in v1.1.

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

A typical mobile FSS setup looks like

fss-mobile-layout.css
fss-mobile-themeOfYourChoice.css
your-tweaks.css

...and, as always, order is important!

Unknown macro: {html}

<hr style="clear:both">

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 files.

Unknown macro: {table-plus}

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

.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

.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

.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

Layout

Containers

Unknown macro: {table-plus}

Classname

Variants

Description

.fl-container*

Fixed width variants found in [FSS] 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

Lists

Unknown macro: {table-plus}

Classname

Variants

Description

.fl-list

 

Applies to a list container, formats the li as container for general purpose content List Demo

.fl-list-menu

 

Applies to a list container, formats the li and an a child as a menu of options List Demo

.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

.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 Thumbnail Demo

Tabs

Unknown macro: {table-plus}

Classname

Variants

Description

.fl-tabs

 

Works exactly like FSS Tabs (scroll to the bottom) but is much more compact for smaller mobile screens Tabs Demo

.fl-tabs-active

 

Hilights the active tab. Class name belongs on the li element Tabs Demo

Buttons

Unknown macro: {table-plus}

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 new in v1.2) there is a border image and translucent gradient shading applied. Buttons Demo

  • No labels