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.

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

Modules

• Plain Box
  <!-- Plain box --> <div class="ez-wr"> <div class="ez-box">.1.</div> </div>
• Module 2A
  <!-- Module 2A --> <div class="ez-wr"> <div class="ez-fl ez-negmr ez-50"> <div class="ez-box">.1.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.2.</div> </div> </div>
• Module 2B
  <!-- Module 2B --> <div class="ez-wr"> <div class="ez-fr ez-negml ez-50"> <div class="ez-box">.1.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.2.</div> </div> </div>
• Module 3A
  <!-- Module 3A --> <div class="ez-wr"> <div class="ez-fl ez-negmx ez-33"> <div class="ez-box">.1.</div> </div> <div class="ez-fl ez-negmr ez-33"> <div class="ez-box">.2.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.3.</div> </div> </div>
• Module 3B
  <!-- Module 3B --> <div class="ez-wr"> <div class="ez-fl ez-negmr ez-33"> <div class="ez-box">.1.</div> </div> <div class="ez-fr ez-negml ez-33"> <div class="ez-box">.2.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.3.</div> </div> </div>
• Module 4A
  <!-- Module 4A --> <div class="ez-wr"> <div class="ez-fl ez-negmx ez-25"> <div class="ez-box">.1.</div> </div> <div class="ez-fl ez-negmx ez-25"> <div class="ez-box">.2.</div> </div> <div class="ez-fl ez-negmr ez-25"> <div class="ez-box">.3.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.4.</div> </div> </div>
• Module 4B
  <!-- Module 4B --> <div class="ez-wr"> <div class="ez-fl ez-negmr ez-50"> <div class="ez-fl ez-negmr ez-50"> <div class="ez-box">.1.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.2.</div> </div> </div> <div class="ez-last ez-oh"> <div class="ez-fl ez-negmr ez-50"> <div class="ez-box">.3.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.4.</div> </div> </div> </div>

Layouts

• Layout 1
  <!-- Layout 1 --> <div class="ez-wr"> <div class="ez-box">.header.</div> <div class="ez-box">.content.</div> <div class="ez-box">.footer.</div> </div>
• Layout 2
  <!-- Layout 2 --> <div class="ez-wr"> <div class="ez-box">.header.</div> <!-- Module 2A --> <div class="ez-wr"> <div class="ez-fl ez-negmr ez-50"> <div class="ez-box">.1.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.2.</div> </div> </div> <div class="ez-box">.footer.</div> </div>
• Layout 3
  <!-- Layout 3 --> <div class="ez-wr"> <div class="ez-box">.header.</div> <!-- Module 3A --> <div class="ez-wr"> <div class="ez-fl ez-negmx ez-33"> <div class="ez-box">.1.</div> </div> <div class="ez-fl ez-negmr ez-33"> <div class="ez-box">.2.</div> </div> <div class="ez-last ez-oh"> <div class="ez-box">.3.</div> </div> </div> <div class="ez-box">.footer.</div> </div>

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

Default widths are already set via classes.