Grids

Row

.row class is used to create a row and it has a wide equals to 100%.

Columns

There are different kind of columns: .column1-2, .column1-3, .column2-3, .column1-4, .column3-4, .column1-5 and .column4-5

The numbers after "column" represent a math division that defines the column wide. For example .column1-3 has a width of 1/3 of its parent and its width property is 33%, .column1-2 a width equals to 50%, .column1-5 a width equals to 20% etc.

Spans

Spans are useful to resize elements. There are different kind of spans: .span1, .span2, .span3, .span4 and .span5.

.span1 has a width equals to 100%, .span2 has a width equals to 50%, .span3 has a width equals to 33.33%, .span4 has a width equals to 25% and .span5 has a width equals to 20%. The number represent the maximum spans can be placed in a row or in a column.

For example in a .row you can place 1 .span1, 2 .span2, 3 .span3, 4 .span4, 5 .span5 etc.


You can mix rows, columns and spans to develop more professional layouts.

Typography

This is a bolded text!

This is an italic text!

This is an overlined text!

This is an underlined text!

This text is through by a line!

This is an uppercased text!

This is a lowercased text!

This is a capitalized text!

This text is aligned to left

This text is aligned to right!

This text is aligned to center!

This text should be justified!

Danger text!

Warning text!

Alert text!

Confirm text!

Info text!

This is <h1> HTML tag!

This is <h2> HTML tag!

This is <h3> HTML tag!

This is <h4> HTML tag!

This is <h5> HTML tag!
This is <h6> HTML tag!

This is a blockquote with a quote!Giuseppe Sanfrancesco

This is a blockquote without a quote!

Callouts

Callouts are useful to highlight some messages. There are different kind of callouts.

Flat Callouts

Danger callout!

Warning callout!

Alert callout!

Confirm callout!

Info callout!

Sleek callout!

Dark callout!

White callout!

Transparent Callouts

Danger callout!

Warning callout!

Alert callout!

Info callout!

Confirm callout!

Dark callout!

Just another beautiful callout!

Skeuomorphic Callouts

This is a danger callout!

This is a warning callout!

This is a confirm callout!

This is an info callout!

This is a sleek callout!

This is a dark callout!

Holo Callout

This is a holo callout!

Dynamic Callouts

This callout can be closed!

To make a X appear for closing callout, you just have to write

To make callout disappear, you must write or add your own JS script! Thao Framework does not provide JS files.

Callout classes only work on <div> and <section>.

Buttons

Flat Buttons

Transparent Buttons

You can also apply these classes to <input type="submit">, but it's strongly recommend to use <button></button>

<a> Flat Buttons

Blue Red Orange Yellow Green Black White

<a> Transparent Buttons

Blue Red Orange Yellow Green Black

Adding .btn-big or .big classes, you can get a big button.

This is a big button This is another big button

Inputs

HTML5 input may not work on some browsers like Mozilla Firefox and IE old versions. This does not depend by Thao.

Lists

  • Root Element
  • Root Element
  • Root Element
    • Nested Element
    • Nested Element
    • Nested Element
      • Nested Element
      • Nested Element
      • Nested Element
  1. Root Element
  2. Root Element
  3. Root Element
    1. Nested Element
    2. Nested Element
    3. Nested Element
      1. Nested Element
      2. Nested Element
      3. Nested Element
  1. Root Element
  2. Root Element
  3. Root Element
    • Nested Element
    • Nested Element
    • Nested Element
      1. Nested Element
      2. Nested Element
      3. Nested Element

Nav is used for wrapping main menu. It is useful to manage resolution breakpoints of main menu with responsiveness.

First of all, for using nav, you have to create a .nav-wrapper. In this class you must create a checkbox with #nav-checkbox and .nav-checkbox.

Once done this, you have to create a div with .nav.collapse and create a ul within it.
You can decide if your .nav has to be static or fixed to top, adding .static or .fixed-top to .nav.collapse

After ul you must insert a label with for="nav-checkbox" class="nav-handle

Forms

Stacked Form
Pure Form

Tables

Minimal
Name Surname Job
Giuseppe Sanfrancesco Web Developer
Dexter Morgan Killer
Walter White Teacher
Footer Footer Footer
Grids
Name Surname Job
Giuseppe Sanfrancesco Web Developer
Dexter Morgan Killer
Walter White Teacher
Footer Footer Footer
Horizontal Border
Name Surname Job
Giuseppe Sanfrancesco Web Developer
Dexter Morgan Killer
Walter White Teacher
Footer Footer Footer
Vertical Border
Name Surname Job
Giuseppe Sanfrancesco Web Developer
Dexter Morgan Killer
Walter White Teacher
Footer Footer Footer