Child pages
  • FSS Naming Conventions

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
{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

*Please Note* the order of the files is still under development.

The order of class names is anything from FSS goes first and your own custom CSS files go last, for example:
{include:FSS file order}

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* stylesheet. For a more detailed explanation, please see [Overriding FSS].
To override any FSS you should have a selector that at the very least [matches the specificity of the FSS selector|Overriding FSS#Specificity of selectors].

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#Specificity of selectors] in your stylesheet, and change the values there.
{note:title=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}

h3. List of class names

Please see the [FSS API] document to view all available FSS CSS convenience class names.

h2. [Layouts|FSS API#Layout]

Contains containers, columns, basic layout management, and layout linearization class names. These class names can go on virtually any element.

*Example* this would make a 250 pixel wide container aligned to the right:
{code:html}
<div class="fl-container-250 fl-force-right">Container</a>
{code}
*Example* this would make 3 flexible width columns of link containers:
{code:html}
<div class="fl-col=flex3">
   <a class="fl-col" href="#">Big Linky column 1</a>
   <a class="fl-col" href="#">Big Linky column 2</a>
   <a class="fl-col" href="#">Big Linky column 3</a>
</div>
{code}

h2. [Advanced Layouts|FSS API#Advanced Layout]

Advanced layout mechanisms (formlery known as Helpers) are CSS class names structured in such a way to lay out widgets, tabs, menus, and other common GUI concepts. These mechanisms make certain best practice and sound markup assumptions (ie. tabs require anchors inside list items).

*Example* this would make a series of 3 tabs aligned to the right of the page
{code:html}
<ul class="fl-tabs fl-tabs-right">
   <li><a class="fl-activeTab" href="#">Big Linky column 1</a></li>
   <li><a class="fl-col" href="#">Big Linky column 2</a></li>
   <li><a class="fl-col" href="#">Big Linky column 3</a></li>
</ul>
{code}

h2. [Text|FSS API#Text]

Text in FSS basically means changing the font-family, size, letter spacing, line-height, and alignment.

*Example* this would justify text within a paragraph, and set the size to 1.3 ems
{code:html}
<p class="fl-tetx-align-justify fl-font-size-130">Text</p>
{code}

h2. [Themes|FSS API#Layout]

Themes are colorizations and stylistic decorations added to text and containers. Themes can also remove these attributes too. Themes work best with other aspects of FSS, but they have broad effects that work on general markup too.

*Example* this would make itself and everything nested within it colorized according to the rules outlined in the High Contrast theme:
{code:html}
<body class="fl-theme-hc">
  ...content...
</body>
{code}

h2. Naming Conventions

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


The template for *FSS* looks like *fl\-\[thing\]-\[role\]\-\[state\]*, with some rules:
# multiple words are in camelCase, so they might look like *fl\-\[thingWithMultipleWordsmultiWordThing\]\-\[roleWithWordsmultiWordRole\]\-\[state\]*
# components are always the first "thing", so they would look like *fl\-\[componentName\]\-\[thing\]\-\[role\]\-\[state\]*


*\[thing\]* = _required_ the concept the class name is referring to at the most general yet still meaningful level (eg. fl\-*tabs*, fl\-*widget*, fl\-*component*, fl\-*col*, fl\-*container*, etc)
*\[role\]* = _optional_ the purpose or action of {{THING}}, which could be a more detailed version of {{THING}} (eg. fl-tabs\-*centered*, fl-col\-*flex*, fl-container\-*500*, fl-widget\-*titleBar*)
*\[state\]* = _optional_ a modifier of the {{ROLE}} or {{THING}}, which is only temporary and dependant on other actions (eg. fl\-button\-left\-*disabled*, fl\-widget\-content\-*draggable*)

The template for *FLUID selectors* looks like *flc\-\[componentName\]*{*}\-\[thing\]\-*\[role\]\-\[state\]*, with the same rules as FSS selectors.

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.