| Info | ||
|---|---|---|
| ||
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. |
| Div | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||
|
...
| Section | ||||||
|---|---|---|---|---|---|---|
|
...
|
...
The Basics
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:
...
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:
...
<div class="fl-container-250 fl-font-size-110 myCustomClass"> </div>
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 HTML and CSS Background.
To override any FSS you should have a selector that at the very least matches the specificity of the FSS selector.
...
- To change this setup for all
fl-col-flex3instances, change the selector definition itself in your stylesheet (ie. copy and rewrite the.fl-col-flex3 .fl-colrules) - To change this setup for just one
fl-col-flex3instances, in your stylesheet you should have a selector that at the very least matches the specificity of the FSS selector in your stylesheet, and change the values there.Note title A Caveat in Overriding FSS In some situations, we have used the
!importantrule to ensure things behave as intended for User Interface Options. You might be required to add this to your new rules as well.
List of class names
Please see the FSS API document to view all available FSS CSS convenience class names.
Layouts
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:
...
<div class="fl-container-250 fl-force-right">Container</a>
Example this would make 3 flexible width columns of link containers:
| Code Block | |||
|---|---|---|---|
| html | html |
<div class="fl-col=flex3">
<a class="fl-col" href="#">Big Linky
|
Advanced Layouts
...
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
...
<p class="fl-text-align-justify fl-font-size-130">Text</p>
Themes
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 Block | html | html |
|---|---|
<body class="fl-theme-hc">
...content...
</body>
| |
Example this would make a series of 3 tabs aligned to the right of the page
...
<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>
|
...
|
...
|
...
|