Pages
Page Examples
Implementation Notes
- The body tag needs to include the class .c-body in order to set the proper background color.
- Classes with the names .c-page* are used to contain the page elements and provide page padding
- The class .c-content--mobile is deprecated and should no longer be used.
- "Utility" classes are used in place of .c-content--mobile.
- Inspect the markup on the example pages for proper HTML and CSS classes used to make up the pages.
- Markup is kept to a minimum with as few "containers" as possible.
-
For the responsive example, a footer nav is optional in the content area. By default the footer nav is full window width, because it's a fixed position element.
However, you can use the AnchoredFooter js plugin on the element to have it match another width on the page.
$('.anchored-footer').flexAnchoredFooter({parentToMatch: '.c-flex-content'});
Examples
Full Page Responsive Example (Opens in new window.)
Split Page Example (Opens in new window.)
Full page responsive nav (Opens in new window.)
Side Nav
The UI Library contains a side nav component when the screen goes below the medium breakpoint (768px). The pieces are laid out like so:
+-(body { position: relative; })--------------------------------------+
| | |
| .c-side-nav_icon | |
| | |
|-(parent of side-nav elements; .c-side-nav--open)--------------------|
| | |
| .c-side-nav | .c-side-nav__overlay |
| | |
| | |
| | |
| | |
| | |
| | |
+---------------------------------------------------------------------+
The following JavaScript code must accompany the markup for the side nav to slide in and out.
$(function () {
var toggleMenu = function () {
$('.c-side-nav').parent().toggleClass('c-side-nav--open');
$('.c-side-nav').scrollTop(0);
};
$('.c-side-nav__icon').on('click', toggleMenu);
$('.c-side-nav__overlay').on('click', toggleMenu);
});