Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.
This walk-through accompanies the FSS: Text Functional Demo in describing how to use the Text functionality of the Fluid Skinning System (FSS). It is written under the assumption that readers have reviewed the Fluid Skinning System (FSS) introductory article and understand what the FSS is.
In order to use the FSS Text class names, you will need to include the following files in the <head> of your document:
All FSS class names use the fl- prefix. In our demos, if you see other class names without this prefix they are either: complimentary CSS; overriding CSS; or specific extensions of the FSS CSS. This means if you don't like the way a certain class names behaves you could easily override or extend them.
A note on semantics
The CSS spec has not entirely respected the existing naming conventions used by the print industry. As such, we've tried to use the simplest semantics possible in our class names.
Examples in the Text Functional Demo show what common fonts are available in the FSS. For the first four examples, a class to indicate what font family to use is not included, so the text reverts back to the default sans-serif font family specified in the reset file: Arial, Helvetica, Clean, and Sans-serif. The last example includes fl-font-times, which brings in the fonts: Georgia, Times, Times New Roman, and Serif.
The complete list of FSS font-family class names and their fonts are as follows:
fl-font-serif - Georgia, Times, Times New Roman, Book Antiqua, serif fl-font-sans - Tahoma, Verdana, Helvetica, sans-serif fl-font-monospace - Courier New, Courier, monospace fl-font-arial - Arial fl-font-verdana - Verdana fl-font-times - Georgia, Times, Times New Roman, serif fl-font-courier - Courier New, Courier, monospace
Font Size and Line height
Variation of text sizes and distances between lines are clearly displayed in the examples. If no classes are used, as is the case with the first example, the text is set to the default size of 13px with a line height of 1.231em. The classes fl-font-size-70, fl-font-size-120, fl-font-size-80, and fl-font-size-100 respectively sets the text to sizes 0.7em, 1.2em, 0.8em, and 1.2em, and allows 1em, 1.5em, 1.1em, and 1.3em of spacing between the lines.
FSS provides the following font sizes and corresponding line heights: