Github

Layout

The layout structure you use may change depending on the state of your app or user.

The only HTML you need in the body of your doc is one of the structure variations below.

Header and Tray are optional. Likely you will not use tray for an anonymous user, enabling it when logged in.

Header content may change depending on login state. Tabs are generally used for switching within a set of related views.

Fullscreen

An empty view with no navigation

<div id="app">
  <div class="full">
  </div>
</div>

View fills the entire browser window, with room for navigation when needed.

View + Header

Header contains your branding and top level navigation

<div id="app">
  <header class="nav">
  </header>
  <div class="view">
  </div>
</div>

View + Tray

Tray is a vertical sidebar on the left. It can be used as primary or secondary navigation

<div id="app">
  <div class="tray">
  </div>
  <div class="view has-tray">
  </div>
</div>

View + Header + Tabs

Tabs provide secondary navigation for whatever is in your .view

<div id="app">
  <header class="nav">
  </header>
  <div class="tabs">
  </div>
  <div class="view has-tabs">
  </div>
</div>

View + Header + Tray

Header allows room on the left for Tray

<div id="app">
  <header class="nav">
  </header>
  <div class="tray">
  </div>
  <div class="view has-tray">
  </div>
</div>

View + Header + Tabs + Tray

Header allows room on the left for Tray

<div id="app">
  <header class="nav">
  </header>
  <div class="tray">
  </div>
  <div class="tabs has-tray">
  </div>
  <div class="view has-tray has-tabs">
  </div>
</div>

Sidebar + View

Allows for a table of contents and a view

<div id="app">
  <header class="nav">
  </header>
  <div class="sidebar">
  </div>
  <div class="view has-sidebar">
  </div>
</div>

Navigation

Add .active to an li to indicate active state.

Header

.top is the home button

Use a ul for your tabs

The ul.session in the is intended for things related to a signed in user.

<header class="nav">
  <a href="/" class="top"></a>
  <ul>
    <li>
      <a href="/actions"></a>
    </li>
  </ul>
  <ul class="session">
    <li>
      <a href="/account"></a>
    </li>
  </ul>
  <ul class="session">
  </ul>
</header>

Tray

<div class="tray">
  <ul>
    <li>
      <a href="/widgets"></a>
    </li>
    <li>
      <a href="/controls"></a>
    </li>
  </ul>
</div>

Tabs

<div class="tabs">
  <a href="/" class="top"></a>
  <ul>
    <li>
      <a href="/account"></a>
    </li>
    <li>
      <a href="/account/privacy"></a>
    </li>
  </ul>
</div>