Herman Layout Regions

The Herman layout is comprised of several “regions” – such as the banner, nav, and main areas – as well as the app and container wrapping regions.

[data-region]

scss

[data-region] {
  width: 100%;
}

All regions are full-width by default.

[data-region='app']

scss

[data-region='app'] {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0;
}

The app region contains the entire application.

[data-region='container']

scss

[data-region='container'] {
  display: flex;
  flex: 1 1 auto;
  position: relative;

  @include tools.above('page-break') {
    justify-content: flex-end;
  }
}

The container region acts as a layout wrapper for the navigation and main content.