Page Container

This class is applied to the parent of the page content.

Contents

Description

Children of the page container include:

  • header

  • main

    • <div class="grid-container">

      • <-- ALL direct descendants of grid-container MUST have a grid-column declared -->

      • aside – refer to Detail Layout.

    • </div>

  • footer

Example

<div class="page-container"> <header class="site-header"> <!-- header contents --> </header> <header class="mobile-header"> <!-- header contents --> </header> <main> <div class="grid-container"> <!-- ALL direct descendants of grid-container MUST have a grid-column declared --> <!-- grid-column: [full, main, main / full, full / main]; --> </div> </main> <footer class="site-footer"> <!-- footer contents --> </footer> </div>

Referenced

https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/133562717

ASCE Digital Style Guide