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:
Herebelow, you see an example of how to use the presentational grid 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.
Herebelow, the example layout for the semantic grid has been rewritten using presentational classes only to demonstrate how both techniques can be used interchangably.