The real thing!

This page contains the markup of the 10 “templates” from the Rapid Prototyping page.

You may want to use Firebug or another developer tool to alter the markup or content of these boxes, or even their container's width to see how each grid behaves.


Simple row

.1.

Module 2A

.1.
.2.

Module 2 B

.1.
.2.

Module 3A

.1.
.2.
.3.

Module 3B

.1.
.2.
.3.

Module 4A

.1.
.2.
.3.
.4.

Module 4B

.1.
.2.
.3.
.4.

Layout 1

.header.
.content.
.footer.

Layout 2

.header.
.1.
.2.
.footer.

Layout 3

.header.
.1.
.2.
.3.
.footer.

Take note: For this demo, containers are styled as follow:

.ez-wr .ez-box {
  text-align: center;
  padding: 20px;
  border: 1px solid #000; 
}

/* to prevent double border on inner boxes */

.ez-wr .ez-wr {
  margin:-1px 0;
}

.ez-wr .ez-box:nth-child(2) {
  border-top: 0;
  border-bottom: 0;
}

In real life, border styling would not be set globally like this, so here we use CSS3 for “layout 1” to avoid polluting these demo boxes with extra hooks (in non CSS3 browsers, there is a 2px top/bottom border on the content box of “layout 1”).