# 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

- 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

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

- 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

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

- 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

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

- 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

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

- 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.