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