Cascade framework provides the following normalised default behavior for the section, main, article, header, footer, aside and nav elements, to make it easier for these elements to use them for defining your grid :
Herebelow is an example of a common website layout, illustrating the use of these elements.
The generic "cell" class further provides a default padding that can be used as a child for your grid cells to provide a default responsive gutter across your page.
You can easily define your grid by adding your own custom styling rules as shown in the example below.
If you need to support IE<9, you will need to add a shiv to allow the section, article, header, footer, aside and nav elements to be styled.
Cascade Framework comes packed with a file called iehtmlshiv.js that is used for this example and combines the following shivs :
The latter shiv further enhances your old IE by adding missing Ecmascript5 features and is a dependency used by the console shiv also included in the
framework, which offers console support to these same browsers.
It is recommended to use conditional comments in your HTML head tag for adding these polyfills to avoid them being loaded in modern browsers while providing an optimal user experience in old IE.
The "site-header" and "site-footer" classes provide additional styles for your site's header and footer.