Key Concepts


A single page is divided into four sectors:

  • header#sector-header holds the topbar, header, and navbar regions.
  • section#sector-content holds the billboard, highlighted, content, aside, sidebar first and sidebar second regions.
  • section#sector-extras holds the appendix and supplement regions.
  • footer#sector-footer holds the footer region.


Zones are inside the sectors and are wrappers of the regions. It has 100% width of the viewport and is very useful if you want a region to have a full width background outside the 960px container. Not every region are wrapped in zones though. Below is the list of Groundwork zones:

  • #topbar-zone
  • #header-zone
  • #navbar-zone
  • #main-zone
  • #appendix-zone
  • #supplement-zone
  • #footer-zone