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.
Join the infusion-users mailing list and ask your questions there.
The Basics
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:
<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" />
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 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].
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-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.
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.