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

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