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.
Available sizes
This column contains a samples of all the different porportional component sizes available.
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.