@rolemodel/optics/dist/css/core/layout.css

Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.

.app-with-sidebar {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: auto 1fr auto;
}

.app-body {
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.app__header {
  position: sticky;
  z-index: var(--op-z-index-header);
  top: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.app__content {
  width: 100%;
  max-width: var(--op-breakpoint-medium);
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  margin: 0 auto;
}

.app__content-no-margin {
  width: 100%;
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  overflow-y: auto;
}

.app__footer {
  position: sticky;
  z-index: var(--op-z-index-footer);
  bottom: 0;
  flex-grow: 0;
  flex-shrink: 0;
}