Feo CSS v3.0.0
  • Introduction
  • What is Feo CSS?
  • Getting started
  • Design tokens
  • Themes
  • Credits
  • Layout
  • Center
  • Cluster
  • Dialog
  • Holy grail
  • Masonry
  • Pancake
  • Sidebar
  • Stack
  • Switcher
  • Tiles
  • Utilities
  • Token-based
  • Flexbox, grid and gap
  • Others
  • Position
  • Typography
  • Made with ♥️ by Crinkles

Layout > Holy grail

The holy grail of all (old-school) websites and applications: a sticky header and footer, sidebars on the side and a body that fills all the available space, as displayed below.

Key elements of this implementation:

  • The header, footer and sidebar are discarded when not used as child elements in this layout class.
  • The body is scrollable. The header, footers and sidebar will remain.

The .grail classes requires a specific implementation to work. The header, footer and body require specific HTML tags for the class to work. However, the sidebars can use any HTML tag (<div>, <aside>, etc.).

html<div class="grail">
    <header>Header</header>
    <div class="any class here">sidebar</div>
    <main>Scrollable content</main>
    <div class="any class here">sidebar</div>
    <footer>Footer</footer>
</div>
Category:
Layout
Source:
https://github.com
Last modified:
8/2/2022, 11:38:56 AM