Let's get started!

If you've read the how-to page already, then you know that all you need to do is cut and paste code snippets from this page to build your own layouts.

You can go ahead and play with these or you can check the tips-and-tricks page first to find out about best practices, etc.

Take note:This demo page includes all modules and layouts “live”.

Modules

  • Plain Box Simple box
  • Module 2A 2 columns: the last column is fluid (it is the last container in the HTML flow)
  • Module 2B 2 columns: the first column is fluid (it is the last container in the HTML flow)
  • Module 3A 3 columns: the last column is fluid (it is the last container in the HTML flow)
  • Module 3B 3 columns: the middle column is fluid (it is the last container in the HTML flow)
  • Module 4A4 columns: the last column is fluid (it is the last container in the HTML flow)
  • Module 4B 4 columns: columns #2 and #4 are fluid (they are the second and fourth container in the HTML flow)

Layouts

  • Layout 1 3 rows: header, content, footer
  • Layout 2 2 colums with header and footer
  • Layout 3 3 columns with header and footer

What's the deal with the numbers?

The numbers in the modules and layouts above show the source order (the HTML flow). Blue numbers correspond to columns for which a width needs to be set (which are all columns in a module but the last one in the flow).

Take note: Default widths are already set via classes.