Herman 4.0.2

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] {
  width: 100%;

All regions are full-width by default.


[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'] {
  @include tools.clearfix;
  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.