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. {note:A Caveat in Overriding FSS} 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. {note} 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.