Rapid Prototyping

The concept is the same, but markup and CSS rules differ.

The CSS file to “pair” with the code snippets below is ez-proto.css. You can check our demo page to see all these modules and layouts “live”.

This solution is a hack as it relies on fieldset to escape caveats related to DIVs. It should not be used for production.

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> <fieldset> <div class="ez-box">.2.</div> </fieldset> </div>
• Module 2B
  <!-- Module 2B --> <div class="ez-wr"> <div class="ez-fr ez-negml ez-50"> <div class="ez-box">.1.</div> </div> <fieldset> <div class="ez-box">.2.</div> </fieldset> </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> <fieldset> <div class="ez-box">.3.</div> </fieldset> </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> <fieldset> <div class="ez-box">.3.</div> </fieldset> </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> <fieldset> <div class="ez-box">.4.</div> </fieldset> </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> <fieldset> <div class="ez-box">.2.</div> </fieldset> </div> <fieldset> <div class="ez-fl ez-negmr ez-50"> <div class="ez-box">.3.</div> </div> <fieldset> <div class="ez-box">.4.</div> </fieldset> </fieldset> </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> <fieldset> <div class="ez-box">.2.</div> </fieldset> </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> <fieldset> <div class="ez-box">.3.</div> </fieldset> </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.