wsui-layout-holy-grail

Holy Grail Layout solved by flexbox.

installation

npm i @jswork/wsui-layout-holy-grail

usage

// use sass
@import '~@jswork/wsui-layout-holy-grail/dist/index.scss';
// use css
@import '~@jswork/wsui-layout-holy-grail/dist/style.css';

<!-- .wsui-layout-holy-grail > .hg-body > {.hg-content + .hg-sidebar + .hg-sidebar } -->
<section class="wsui-layout-holy-grail">
  <!-- Header -->
  <header>
    <p>Header</p>
  </header>

  <article class="hg-body">
    <div class="hg-content">
      <p>Main content of the page</p>
    </div>
    <div class="hg-sidebar-1 hg-sidebar">
      <p>Sidebar 1</p>
    </div>
    <div class="hg-sidebar-2 hg-sidebar">
      <p>Sidebar 2</p>
    </div>
  </article>

  <!-- Footer -->
  <footer>
    <p>Footer</p>
  </footer>
</section>

preview

• https://afeiship.github.io/wsui-layout-holy-grail/

license

Code released under the MIT license.