Splendid layouts

Shell Simple

shell-simple is used to create a simple vertical layouts where the content expands to fill all available space. This allows the footer to stick to the bottom of the page.

Content that fills up available space

In shell-simple, content expands to fill up any available space, allowing the footer to stick to the bottom.

index.html
<div class="shell-grid">
  <main class="content">Content</main>
  <footer class="footer">Footer</footer>
</div>
Content
Footer

Add other sections as needed

You can insert sections above content or between content and footer. The height of content will be adjusted automatically.

index.html
<div class="shell-simple">
  <header>Header</header>
  <main class="content">Content</main>
  <div>Something Else</div>
  <footer class="footer">Footer</footer>
</div>
Header
Content
Something Else
Footer