Section | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Getting Started With FSS
The FSS is intended to be used as the basis for your website, extended and customized by your own styles. The short-version of how to use FSS is:
...
A slightly longer version of how to use FSS is provided in the sections below. For more details on the specific classes available in the FSS, see the FSS Cheat Sheet page.
1. Including FSS files
FSS includes several separate files, each providing particular functionality:
...
Your declaration of FSS files should look somewhat like the following:
Include Page |
---|
...
|
...
|
The above example uses all the different FSS CSS functions. If you have no use for one of the files, you do not need to include it.
2. Adding FSS classes to your mark-up
Note also that you should always put any FSS class names at the beginning of the class attribute in your HTML declarations, before any of your custom classes. For example:
Code Block | ||||
---|---|---|---|---|
| ||||
<div class="fl-container-250 fl-font-size-110 myCustomClass"> </div>
|
3. Overriding FSS classes
While the FSS classes are generally well thought-out and pretty comprehensive, it is likely that you will want to customize your site by overriding some of the styles. This is how we expect the FSS to be used.
...
In all cases, you should override FSS classes in your own custom stylesheet. Do not modify the original FSS files.
Overriding an entire class
Overriding an entire class doesn't mean that you have to change all of the properties specified. To override fl-para
, you can copy and paste the code into your imported or embedded style sheet and modify it however you like. Here's an example:
Section | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
If this override is pasted into an imported style sheet, please note that the code for importing that style sheet would have to come after the code for importing the original (see Order of overrides #4).
Overriding an instance of a class
In some cases, you may only wish to override an FSS style for one element that the class is applied to. This can be accomplished by using a selector that is specific to only that element, for example by adding a class name, or using other specifics.
Section | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Extending FSS classes
The FSS defines many variations of a given style - for example, it defines several widths for use with fixed-width columns. But it is likely that someone will want a width (or font size, or anything else) that is not specifically defined in the FSS files. In these cases, you are encouraged to copy the style, rename it and customize it to your specific needs.
...