Shell Simple

Basic Usage

Shell-simple contains two two main layers:

1. Content
2. Footer

<div class="Shell-simple">
  <main class="Content">Content</main>
  <footer class="Footer">Footer</footer>
</div>

Adding other sections

You can add sections above Content or between Content and Footer. The Content section’s height will automatically adjust to fill the available space.

<div class="Shell-simple">
  <header>Header</header>
  <main class="Content">Content</main>
  <div>Another section</div>
  <footer class="Footer">Footer</footer>
</div>

Adjusting Gap Between Sections

Shell-simple uses Flexbox underneath the hood. You can change the gap property to adjust the space between sections.

<div class="Shell-simple gap-4">
  ...
</div>

.Shell-simple {
  gap: 1rem;
}

Sticky Sidebar within Content

To create a sticky sidebar within Content (like the one on this page), use a grid inside Content and apply Sticky to the sidebar.

<div class="Shell-simple">
  <div class="Content">
    <div class="SimpleGrid [--cols:2]">
      <main>Content</main>
      <aside class="Sticky">Sticky Sidebar</aside>
    </div>
  </div>
</div>

Here’s the CSS for Shell-simple.

.Shell-simple {
  display: flex;
  flex-direction: column;
  height: inherit;

  > .Content {
    flex-grow: 1;
  }

  > .Footer {
    flex-shrink: 0;
  }
}

Shell Simple

Child Classes