webawesome/docs/_includes/layout-templates/example.css

{% include "layout-templates/reset.css" %}

.grid {
  font-size: 1.35rem;
  text-align: center;
  display: grid;
  place-content: center;
  padding: 1rem;
}

header {
  background-color: var(--wa-color-blue-90);
}

aside {
  min-width: 250px;
  max-width: 250px;
}

main {
  background-color: var(--wa-color-green-90);
  height: 100%;
}

footer {
  background-color: var(--wa-color-blue-80);
}

.banner {
  background-color: var(--wa-color-yellow-90);
}

.header {
  background-color: var(--wa-color-blue-90);
}

.banner,
.header {
  min-width: 100%;
  height: 100%;
}

[slot='header'] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

[slot='aside'] {
  height: 100%;
  background-color: var(--wa-color-yellow-90);
}

[slot='menu'] {
  height: 100%;
  background-color: var(--wa-color-red-90);
}

[slot='main-header'] {
  background-color: var(--wa-color-red-80);
  padding: 1rem;
}

[slot='main-footer'] {
  background-color: var(--wa-color-green-80);
}