Child pages
  • FSS Naming Conventions

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
{info:title=About this page} This document will only show the basics in a condensed syntax. It is highly recommended that you review the in-depth walkthroughs for more information. {info} {div:class=LinksPanel} {panel:title= On This Page| borderStyle=solid| borderColor=#566b30| titleBGColor=#D3E3C4| bgColor=#fff} {toc:minLevel=2|maxLevel=5} {panel} {div} {include:FSS Links Panel} h2. The Basics h3. Order of CSS Files The order of class names is anything from FSS goes first and your own custom CSS files go last, for example: {code:html} <link href="fluid.reset.css" rel="stylesheet" /> <link href="fluid.layout.css" rel="stylesheet" /> <link href="fluid.text.css" rel="stylesheet" /> <link href="fluid.themes.css" rel="stylesheet" /> <link href="fluid.states.css" rel="stylesheet" /> <link href="fluid.component.name.css" rel="stylesheet" /> <link href="YourStyleSheetGoesHere.css" rel="stylesheet" /> {code} h3. Order of Class names The order of class names is anything from FSS goes first and your own custom class names goes last, for example: {code:html} <div class="fl-container-250 fl-font-size-110 myCustomClass"> </div> {code} h3. Over-riding FSS data This is intended as a broad overview of customizing FSS. For a more detailed explanation, please see [Overriding FSS]. To overrride any FSS you should have a selector that at the very least [matches the specificity of the FSS selector|Overriding FSS]. An example of over-riding FSS could be when you want to change a columns width:padding:margin values. Here is the markup, creating 3 columns: {code:html} <div class="fl-col-flex3 myCustomClass"> <div class="fl-col"> </div> <div class="fl-col"> </div> <div class="fl-col"> </div> </div> {code} h2. Layouts h2. Text h2. Colors
Wiki Markup
Section
Column
Include Page
FSS Links Panel
FSS Links Panel
Column

Naming Conventions

FSS and Infusion both adhere to a strict naming convention for class name selectors.

Include Page
Class Name Conventions
Class Name Conventions

The reason we do this is to separate the different purposes of selectors: one to style things, one to find things in the DOM. This way, you could change your behavioural code without affecting your appearance and vice versa.