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
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