Using Semantic Class Names

This page demonstrates how easy it is to use semantic class for small areas of your site such as the main navigation or a thumbnail gallery, or for the entire site as part of your deployment process. All the stack component classes that relate to non-semantic width propoerties have been replaced with arbitrary 'semantic' classes. I have kept the .stackConent class because i consider it to be semantic enough for this purpose. This could, however also be replaced in a similar fashion. The relevant classes are then simply added to stacklayout.css and stacklayout_lte_ie7.css. In this case i'm using stacklayout-semantic.css and stacklayout-semantic_lte_ie7.css, in which I have commented out the original stack component class names for reference. It should be noted that the parent .stack class is still required.

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 samples of all the different proportional 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.