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 under 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="grid-simple [--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