Fluid Skinning System demos

Here are some demos showcasing how the Fluid CSS convenience classnames work. The FSS is a completely class based CSS convenience system, and does not focus on typography and grids as heavily as other major CSS frameworks; rather it is designed to help enhance the effectiveness of Fluid components and encourage cleaner markup.

This file contains the fluid.reset.css file to better normalize text discrepancies across all browsers.

Class-names
None. Just using fluid.text.css
Font-Size
Reset base font-size to 13px
Line-Height
Reset line height to multiplier of 1.231
Font-Family
Reset font-fmaily to "arial,helvetica,clean,sans-serif"
Text-Alignment
Not set
Letter-spacing/Tracking
Not set
Class-names
fl-font-size-70
Font-Size
0.7em
Line-Height
1em
Font-Family
Not set, using base
Text-Alignment
Not set, using base
Letter-spacing/Tracking
Not set, using base
Class-names
fl-font-size-120
Font-Size
1.2em
Line-Height
1.5em
Font-Family
Not set, using base
Text-Alignment
Not set, using base
Letter-spacing/Tracking
Not set, using base
Class-names
fl-font-size-80, fl-font-spacing-3, fl-font-times
Font-Size
0.8em
Line-Height
1.1em
Font-Family
Georgia, Times, Times New Roman, Serif
Text-Alignment
Not set, using base
Letter-spacing/Tracking
Not set, using base
Class-names
fl-font-size-100, fl-font-times, fl-text-align-justify
Font-Size
1.0em
Line-Height
1.3em
Font-Family
Georgia, Times, Times New Roman, Serif
Text-Alignment
Full justified
Letter-spacing/Tracking
Not set, using base

The H1 tag looks like this

The paragraph tag after an H1 tag looks like this

The H2 tag looks like this

The paragraph tag after an H2 tag looks like this

The H1 tag looks like this

The paragraph tag after an H3 tag looks like this

The H4 tag looks like this

The paragraph tag after an H4 tag looks like this

The H5 tag looks like this

The paragraph tag after an H5 tag looks like this

  1. This is a strong element in an ordered list
  2. This is an italic element in an ordered list
  3. This is a bold element in an ordered list
  4. This is an emphasized element in an ordered list
  5. This is a regular element in an ordered list
The block quote element looks like this
The pre element looks like this
The code element looks like this
The span element looks like this
The anchor element looks like this
This is a cell inside the table header
This is a cell inside the table body
This is a cell inside the table footer

Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this.

The H1 tag looks like this

The paragraph tag after an H1 tag looks like this

The H2 tag looks like this

The paragraph tag after an H2 tag looks like this

The H1 tag looks like this

The paragraph tag after an H3 tag looks like this

The H4 tag looks like this

The paragraph tag after an H4 tag looks like this

The H5 tag looks like this

The paragraph tag after an H5 tag looks like this

  1. This is a strong element in an ordered list
  2. This is an italic element in an ordered list
  3. This is a bold element in an ordered list
  4. This is an emphasized element in an ordered list
  5. This is a regular element in an ordered list
The block quote element looks like this
The pre element looks like this
The code element looks like this
The span element looks like this
The anchor element looks like this
This is a cell inside the table header
This is a cell inside the table body
This is a cell inside the table footer

Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this.

The H1 tag looks like this

The paragraph tag after an H1 tag looks like this

The H2 tag looks like this

The paragraph tag after an H2 tag looks like this

The H1 tag looks like this

The paragraph tag after an H3 tag looks like this

The H4 tag looks like this

The paragraph tag after an H4 tag looks like this

The H5 tag looks like this

The paragraph tag after an H5 tag looks like this

  1. This is a strong element in an ordered list
  2. This is an italic element in an ordered list
  3. This is a bold element in an ordered list
  4. This is an emphasized element in an ordered list
  5. This is a regular element in an ordered list
The block quote element looks like this
The pre element looks like this
The code element looks like this
The span element looks like this
The anchor element looks like this
This is a cell inside the table header
This is a cell inside the table body
This is a cell inside the table footer

Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this.

The H1 tag looks like this

The paragraph tag after an H1 tag looks like this

The H2 tag looks like this

The paragraph tag after an H2 tag looks like this

The H1 tag looks like this

The paragraph tag after an H3 tag looks like this

The H4 tag looks like this

The paragraph tag after an H4 tag looks like this

The H5 tag looks like this

The paragraph tag after an H5 tag looks like this

  1. This is a strong element in an ordered list
  2. This is an italic element in an ordered list
  3. This is a bold element in an ordered list
  4. This is an emphasized element in an ordered list
  5. This is a regular element in an ordered list
The block quote element looks like this
The pre element looks like this
The code element looks like this
The span element looks like this
The anchor element looks like this
This is a cell inside the table header
This is a cell inside the table body
This is a cell inside the table footer

Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this.

The H1 tag looks like this

The paragraph tag after an H1 tag looks like this

The H2 tag looks like this

The paragraph tag after an H2 tag looks like this

The H1 tag looks like this

The paragraph tag after an H3 tag looks like this

The H4 tag looks like this

The paragraph tag after an H4 tag looks like this

The H5 tag looks like this

The paragraph tag after an H5 tag looks like this

  1. This is a strong element in an ordered list
  2. This is an italic element in an ordered list
  3. This is a bold element in an ordered list
  4. This is an emphasized element in an ordered list
  5. This is a regular element in an ordered list
The block quote element looks like this
The pre element looks like this
The code element looks like this
The span element looks like this
The anchor element looks like this
This is a cell inside the table header
This is a cell inside the table body
This is a cell inside the table footer

Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this. Text inside a div that is 200 pixels wide looks like this.