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 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 [CustomizingOverriding FSS].
To overrride any FSS you should have a selector that at the very least [matches the specificity of the FSS selector|CustomizingOverriding 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