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 and introductions 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. Overriding FSS data This is intended as a broad overview of changing FSS. All changes should be done in *your* sylesheet. 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 default width:padding:margin values. Assuming you have an {{fl-col-flex3}} instance somewhere you want to change. You can do this 2 ways: * To change this setup for +all+ {{fl-col-flex3}} instances, change the selector definition itself in *your* stylesheet (ie. copy and rewrite the {{.fl-col-flex3 .fl-col}} rules) * To change this setup for +just one+ {{fl-col-flex3}} instances, in *your* stylesheet you should have a selector that at the very least [matches the specificity of the FSS selector|Overriding FSS] in your stylesheet, and change the values there. * In some situations, we have used the {{!important}} rule to ensure things behave as intended for [UI Options]. You might be required to add this to your new rules as well. 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.