Grid documentation

Presentational classes

While presentational classes do tend to result in having more classes in your markup that have no semantic purpose and therewith often leads to uglier HTML markup, the trade-off is that it allows you to write much less custom CSS to achieve the same effect.

This is because presentational classes increase the reusability of your CSS rules and can act as an abstraction layer for dealing with browser quirks. UI elements that share presentational features but have no shared semantics can inherit from the same presentational classes, which themselves are optimised for crossbrowser support and modularity.

Because this can significantly decrease the time required to build a professional crossbrowser design, Cascade Framework offers a range of presentational grid classes as an alternative to its semantic grid mechanism:

• The "col" class adds the default styling rules used for the section, article, header, footer, aside and nav elements to any block level element, usually a div element. This is especially useful when you want support for old IE without relying on a Javascript based shiv.
• You can add a percentage based width to your section, article, header, footer, aside and nav elements or your block level element with a "col" class by adding a class that has the format "width-XofY". Y can be 2,3,4,5,6,7,8,9,10,12,16 or 24 and X can be any value between 1 and Y-1.
• The "width-fit" class can be used as a wrapper for elements that have a fixed width and automaticly takes the width of that element. It is especially useful as a wrapper for images as part of the media object pattern.
• The "width-fill" class can be used to get an element to fill any remaining space in its container element. It is especially useful to compensate for rounding errors in old IE when using the "width-XofY" class or custom percentage based widths, but also as part of the media object pattern.

Herebelow, you see an example of how to use the presentational grid classes.

Responsive presentational classes

If you use Cascade Framework's responsive mechanism, all widths for section, article, header, footer, aside and nav elements and block level elements with a "col" class are reset back to 100%. This behavior can be overwritten by screen width specific classes that have the format "A-width-XofY", "A-width-fit" or "A-width-fill", where A can be "phone", "tablet" or "mobile".

In the example below, tablet specific presentational classes have been added to adjust the layout only for the screen range commonly used in tablets. If you're using a desktop or laptop computer, you can resize your browser to test the effect.

Site layout

Herebelow, the example layout for the semantic grid has been rewritten using presentational classes only to demonstrate how both techniques can be used interchangably.