{"type":"doc","content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"style","parameters":{"macroParams":{"__bodyContent":{"value":"\n.wiki-content h4 {\nbackground:transparent;\n}\n.wiki-content h3 {\npadding:5px;\nbackground:transparent;\n}\n.api {\n border:1px solid #ccc;\n border-collapse:collapse;\n clear:both;\n width:100%;\n }\n\n.api th,\n.wiki-content .api tr th{\n border:1px solid #ccc;\n background:#f4f4f4;\n padding:5px;\n text-align:center;\n table-layout:fixed;\n }\n\n.api td,\n.wiki-content .api tr td {\n border:1px solid #ccc;\n padding:5px;\n vertical-align:top;\n }\n\n.api tr td:nth-child(1),\n.api tr td:nth-child(2) {\n font-family:monospace;\n }\n\n.api tr td:nth-child(1) { width:150px; }\n.api tr td:nth-child(2) { width:150px; }\n.api tr td:nth-child(3) { width:400px; }\n"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Style"}}}},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Work In Progress","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":" 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.","type":"text"}]}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"include","parameters":{"macroParams":{"":{"value":"FSS Links Panel"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Include Page"}}}}]}],"version":1},"cxhtml":"

"}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Introduction","type":"text"}]},{"type":"paragraph","content":[{"text":"Note: The Mobile FSS is ","type":"text"},{"text":"new in v1.1","type":"text","marks":[{"type":"textColor","attrs":{"color":"#800080"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"This article is for documents all the Mobile FSS classnames and describes what they do, when to use them, and how to extend them.","type":"text"}]},{"type":"paragraph","content":[{"text":"Knowledge of the core ","type":"text"},{"text":"FSS Cheat Sheet","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315974"}}]},{"text":" is not required, although extremely useful.","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The fss-mobile-layout.css file is required.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The fss-mobile-layout.css file has theme-specific layout adjustments.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"fss-reset.css is not as relevant on the mobile platform as it is on the desktop.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mobile FSS relies heavily on Webkit, and is currently limited to platforms that use Webkit-based browsers (eg Android, iPhone, etc)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Since performance on the mobile platform is very different than any other, it is ","type":"text"},{"text":"highly","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"A typical mobile FSS setup looks like","type":"text"}]},{"type":"codeBlock","content":[{"text":"\nfss-mobile-layout.css\nfss-mobile-themeOfYourChoice.css\nyour-tweaks.css\n","type":"text"}]},{"type":"paragraph","content":[{"text":"...and, as always, ","type":"text"},{"text":"order is important!","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"html","parameters":{"macroParams":{"__bodyContent":{"value":"\n

\n"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"html"}}}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"FSS / mFSS overlapping class names","type":"text"}]},{"type":"paragraph","content":[{"text":"The following class names used in FSS are also used in mobile FSS, with different effects applied.","type":"text"},{"type":"hardBreak"},{"text":"\nAny other FSS class name has no effect unless you include the ","type":"text"},{"text":"FSS","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315974"}}]},{"text":" files.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"table-plus","parameters":{"macroParams":{"class":{"value":"api"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"table-plus"}}},"content":[{"type":"table","attrs":{"layout":"align-start"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Classname ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Notes ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Difference between FSS and mFSS ","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-container* ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Width values are ignored, the element is indented 10px, and for the iphone it adds rounded corners to ","type":"text"},{"text":".fl-list-*","type":"text","marks":[{"type":"code"}]},{"text":" children. Usage is outlined in detail in the ","type":"text"},{"text":"latest Mobile FSS demos ","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/demo.html"}}]},{"text":" ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-icon ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Resizes the default dimensions for icons. Adds rounded corners. Manipulated extensively within ","type":"text"},{"text":".fl-list-*","type":"text","marks":[{"type":"code"}]},{"text":" elements. Usage is outlined in detail in the ","type":"text"},{"text":"latest Mobile FSS demos ","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/demo.html"}}]},{"text":" ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-label ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" width is reduced to 25% from 50% ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-button ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Changes the appearance to a simple rounded button ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-button-inner ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" No styling applied since it becomes redundant in modern mobile browsers. Sliding door, scalable buttons can be achieved without it. ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-tabs ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Restyled to look more like a multipurpose cluster of elements instead of desktop OS-style tabs ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-tabs-active ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Still highlights the selected tab ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-list-menu ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" list-based menus are the core navigation mechanism in mobile FSS. Usage is outlined in detail in the ","type":"text"},{"text":"latest Mobile FSS demos ","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/basic.html"}}]},{"text":" ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-grid ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Grid items are much smaller, depending on other required mobile FSS class names like ","type":"text"},{"text":".fl-list-thumbnails and .fl-thumbnails-expanded","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-grid-caption ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Captions are below image and not on top ","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Layout","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Containers","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"table-plus","parameters":{"macroParams":{"class":{"value":"api"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"table-plus"}}}}]},{"type":"table","attrs":{"layout":"align-start"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Classname ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Variants ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Description ","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-container* ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Fixed width variants found in ","type":"text"},{"text":"FSS","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/pages/createpage.action?spaceKey=fluid&title=FSS%20API"}}]},{"text":" are ignored ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" For the iphone, it forces a list to have round corners and content to be indented by 10px ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-table ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" For making an arbitrary element display like a table ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-table-cell ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" For making an arbitrary element display like a table cell, enabling vertically alignment for children, (ie. centering things vertically) ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-table-row ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" For making an arbitrary element display like a table row ","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Lists","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"table-plus","parameters":{"macroParams":{"class":{"value":"api"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"table-plus"}}}}]},{"type":"table","attrs":{"layout":"align-start"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Classname ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Variants ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Description ","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-list ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Applies to a list container, formats the ","type":"text"},{"text":"li","type":"text","marks":[{"type":"code"}]},{"text":" as container for general purpose content ","type":"text"},{"text":"List Demo","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/basic.html"}}]},{"text":" ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-list-menu ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Applies to a list container, formats the ","type":"text"},{"text":"li","type":"text","marks":[{"type":"code"}]},{"text":" and an ","type":"text"},{"text":"a","type":"text","marks":[{"type":"code"}]},{"text":" child as a menu of options ","type":"text"},{"text":"List Demo","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/basic.html"}}]},{"text":" ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-list-thumbnails ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Applies to a list container, formats the ","type":"text"},{"text":"li","type":"text","marks":[{"type":"code"}]},{"text":" with an ","type":"text"},{"text":"a","type":"text","marks":[{"type":"code"}]},{"text":" child with an ","type":"text"},{"text":"img.fl-icon","type":"text","marks":[{"type":"code"}]},{"text":" child as a menu of options with a large graphic on the left ","type":"text"},{"text":"DEMO","type":"text","marks":[{"type":"link","attrs":{"href":"http://build.fluidproject.org/infusion/demos/fss/mobile/html/nav/thumb.html"}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-icon ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" When used inside an ","type":"text"},{"text":".fl-list-menu","type":"text","marks":[{"type":"code"}]},{"text":" it becomes a 30px x 30px graphic. When used within ","type":"text"},{"text":".fl-list-thumbnails","type":"text","marks":[{"type":"code"}]},{"text":" it becomes a 44px x 44px thumbnail. When used within ","type":"text"},{"text":".fl-thumbnails-expanded","type":"text","marks":[{"type":"code"}]},{"text":" it becomes a 64px x 64px thumbnail. ","type":"text"},{"text":".fl-icon","type":"text","marks":[{"type":"code"}]},{"text":" inside and ","type":"text"},{"text":".fl-list","type":"text","marks":[{"type":"code"}]},{"text":" has rounded corners and can be made \"glossy\" ","type":"text"},{"text":"Icon Demo","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/icon.html"}}]},{"text":" ","type":"text"},{"text":"Thumbnail Demo","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/nav/thumb.html"}}]},{"text":" ","type":"text"}]}]}]}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Tabs","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"table-plus","parameters":{"macroParams":{"class":{"value":"api"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"table-plus"}}},"content":[{"type":"table","attrs":{"layout":"align-start"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Classname ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Variants ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Description ","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-tabs ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Works exactly like ","type":"text"},{"text":"FSS Tabs (scroll to the bottom)","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/layout/demo.html"}}]},{"text":" but is much more compact for smaller mobile screens ","type":"text"},{"text":"Tabs Demo","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/tabs/basic.html"}}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-tabs-active ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Hilights the active tab. Class name belongs on the ","type":"text"},{"text":"li","type":"text","marks":[{"type":"code"}]},{"text":" element ","type":"text"},{"text":"Tabs Demo","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/tabs/basic.html"}}]},{"text":" ","type":"text"}]}]}]}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Buttons","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"table-plus","parameters":{"macroParams":{"class":{"value":"api"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"table-plus"}}},"content":[{"type":"table","attrs":{"layout":"align-start"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Classname ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Variants ","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Description ","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-button ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" .fl-button-green, .fl-button-black, .fl-button-blue, .fl-button-white ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":" Doesn't do much on its own, but when used with the iphone/android theme (the android theme is ","type":"text"},{"text":"new in v1.2","type":"text","marks":[{"type":"textColor","attrs":{"color":"#800080"}}]},{"text":") there is a border image and translucent gradient shading applied. ","type":"text"},{"text":"Buttons Demo","type":"text","marks":[{"type":"link","attrs":{"href":"http://fluidproject.org/releases/1.2/demos/fss/mobile/html/buttons/basic.html"}}]},{"text":" ","type":"text"}]}]}]}]}]}]},{"type":"paragraph"}]}],"version":1},"cxhtml":"

\n\n

Introduction

\n\n

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

\n\n

This article is for documents all the Mobile FSS classnames and describes what they do, when to use them, and how to extend them.

\n\n

Knowledge of the core is not required, although extremely useful.

\n\n

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:

\n\n

The fss-mobile-layout.css file is required.
The fss-mobile-layout.css file has theme-specific layout adjustments.
fss-reset.css is not as relevant on the mobile platform as it is on the desktop.
mobile FSS relies heavily on Webkit, and is currently limited to platforms that use Webkit-based browsers (eg Android, iPhone, etc)
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.

\n\n\n

A typical mobile FSS setup looks like

\n\n

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

\n\n\n\n\n

\n]]>

\n\n

FSS / mFSS overlapping class names

\n\n

The following class names used in FSS are also used in mobile FSS, with different effects applied.
\nAny other FSS class name has no effect unless you include the FSS files.

\n\n

api\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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

\n\n\n

Layout

\n\n\n

Containers

\n\n

api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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

\n\n\n

Lists

api

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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

\n\n

Tabs

api\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

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

\n\n

Buttons

api\n

\n\n\n\n\n\n\n\n\n\n\n

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

\n"}}}]}],"version":1}

Mobile FSS Cheat Sheet