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
- This is a strong element in an ordered list
- This is an italic element in an ordered list
- This is a bold element in an ordered list
- This is an emphasized element in an ordered list
- This is a regular element in an ordered list
- This is a strong element in an unordered list
- This is an italic element in an unordered list
- This is a bold element in an unordered list
- This is an emphasized element in an unordered list
- This is a regular element in an unordered 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
- This is a strong element in an ordered list
- This is an italic element in an ordered list
- This is a bold element in an ordered list
- This is an emphasized element in an ordered list
- This is a regular element in an ordered list
- This is a strong element in an unordered list
- This is an italic element in an unordered list
- This is a bold element in an unordered list
- This is an emphasized element in an unordered list
- This is a regular element in an unordered 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
- This is a strong element in an ordered list
- This is an italic element in an ordered list
- This is a bold element in an ordered list
- This is an emphasized element in an ordered list
- This is a regular element in an ordered list
- This is a strong element in an unordered list
- This is an italic element in an unordered list
- This is a bold element in an unordered list
- This is an emphasized element in an unordered list
- This is a regular element in an unordered 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
- This is a strong element in an ordered list
- This is an italic element in an ordered list
- This is a bold element in an ordered list
- This is an emphasized element in an ordered list
- This is a regular element in an ordered list
- This is a strong element in an unordered list
- This is an italic element in an unordered list
- This is a bold element in an unordered list
- This is an emphasized element in an unordered list
- This is a regular element in an unordered 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
- This is a strong element in an ordered list
- This is an italic element in an ordered list
- This is a bold element in an ordered list
- This is an emphasized element in an ordered list
- This is a regular element in an ordered list
- This is a strong element in an unordered list
- This is an italic element in an unordered list
- This is a bold element in an unordered list
- This is an emphasized element in an unordered list
- This is a regular element in an unordered 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.