Wrappers

This page demonstrates the use of .wrapper elements to define content width within full page sections. These are indicated by the dotted lines.

Nesting

This page also demonstrates some deeper component nesting. Stack components can be infinitely nested.

Navigation Stack Components

The navigation menu items on this page are actually .stackAuto components surrounding anchors that are .stackContent components.

This is a full width .stackContent component inside a .stack1of3 component

Sample content

This is .stack1of2 component

This is .stack1of2 component

Another full width .stackContent component

Even more sample content

This is a p.stackContent component. You can just stack them up like normal block level elements.

This is a p.stackContent component. You can just stack them up like normal block level elements.

This is a p.stackContent component. You can just stack them up like normal block level elements.

This is a full width .stackContent component inside a .stack2of3 component

It has five .stack1of5 siblings which are vertical-align:middle:

.stack1of5 <h5>

.stack1of5 <h3>

.stack1of5 <h1>

.stack1of5 <h3>

.stack1of5 <h5>

A .stackContent component inside a .stack1of4 component

Sample text.

Another .stackContent component

Even more sample text.

A bunch of different sized images, all wrapped in .stackAuto components with vertical-align:middle 'stack' neatly into rows like text:

Reduce the screen width to witness their desirable stack behaviour.

Available sizes

This column contains a samples of all the different porportional component sizes available.

.stack1of2
.stackAuto component
.stack2of3
.stack1of3
.stack3of4
.stack1of4
.stack4of5
.stack1of5
.stack3of5
.stack2of5
Another .stackAuto component

This is a .stackContent component containing some good old Lorem Ipsum:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet, tellus a pulvinar tempus, enim orci ultrices mi, a viverra justo sem a nunc. Aenean in nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi est quam, luctus a, mattis id, ullamcorper eget, magna. Nulla odio. Etiam est.