Layouts

Beegrid have a set of predefined layouts. With a minimum set of classes and few components you can laying out an entire website.

Components Overview

Layout Container: in which Header, Nav, Content and Footer can be nested, and can be placed.
Header: The top layout with default style, in which any element can be nested.
Nav: A simple sidebar with default style, in which any element can be nested.
Main: The content layout with default style, in which any element can be nested, such as a grid container.
Footer: The bottom layout with default style, in which any element can be nested.

Examples

Header

Main

<div class="layout-1">
  <header>Header</header>
  <main>Main</main>
</div>

Header

Main

<div class="layout-2">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
</div>

Header

Main

<div class="layout-3">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
</div>

Header

Main

<div class="layout-4">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <footer>Footer</footer>
</div>

Header

Main

<div class="layout-5">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <footer>Footer</footer>
</div>

Header

Main

<div class="layout-6">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <footer>Footer</footer>
</div>

Header

Main

<div class="layout-7">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

Header

Main

<div class="layout-8">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <aside>Aside</aside>
</div>

Header

Main

<div class="layout-9">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <aside>Aside</aside>
</div>

Header

Main

<div class="layout-10">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

Mobile behavior

BeeGrid include a JavaScript plugin called Navbar. This plugin allow you to decide if you want a fully CSS Layout or a JavaScript variant. This plugin is usable only with the layouts with a nav component. If you include a button, or any HTML element, having class .--toggler-menu the plugin automatically change the layout default behavior and hide nav on small devices. This of course, not before you have included the plugin in your web page before closing the <body> tag.

<body>
  <div class="layout-2">
    <header>
      <a href="#" class="--toggler-menu">
        Toggle menu
      </a>
    </header>
    <nav>Nav</nav>
    <main>Main</main>
  </div>

  <script type="text/javascript" src="dist/js/navbar.min.js"></script>
</body>

If you run this script you’ll not see the button on large screens, but only from smaller and below. Just like this web site.