- Brand
- Forms
- Buttons
- Utilities
- Components
- Compositions
  - Core admin
  - App admin
  - App admin with menu
  - Section
  - Nested section
  - Section with flash
  - Two columns
  - Tabulated content
  - Annotated section
  - Annotated section with tabulated content
  - Annotated section with frameless content
  - Fullscreen modal
- Ember Addon

### Core Admin

    <nav id="sidebar" class="menu menu-fixed flex-col">
      ...
    </nav>
    <nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
      ...
    </nav>
    <div class="sided-content">
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
                    data-target="body" data-value="menu-open">
              <span class="sr-only">Toggle Navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle navbar-toggle-context"
                    data-toggle="collapse" data-target=".navbar-top-collapse">
              <span class="sr-only">Toggle Navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand-container">
              <span class="navbar-brand">
                <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
              </span>
            </div>
          </div>
          <div class="collapse navbar-collapse navbar-top-collapse">
            <div class="navbar-right">
              <button class="btn btn-secondary navbar-btn" type="button">Button</button>
              <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
            </div>
          </div>
        </div>
      </nav>
      <section class="main-content">
        <div class="sheet">
          <p>Body</p>
        </div>
      </section>
    </div>

### App admin

#### Information

On mobile devices, the parent iframe overlay a toggle button over the iframe to toggle the parent frame menu.

This can be replaced by your own toggle button as presented in the App admin with menu example.

    <div class="menu-toggle-hideable">
      <button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
              data-target="body" data-value="menu-open">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="sidebar" class="menu menu-fixed flex-col menu-folded">
      ...
    </nav>
    <nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
      ...
    </nav>
    <div class="sided-content-full">
      <iframe class="iframe-fullscreen"
              src="/embed/app_admin__content/index.html"
              frameborder="0"></iframe>
    </div>

    <!-- iFrame content -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      ...
    </nav>
    <section class="main-content">
      <div class="sheet">
        <p>Body</p>
      </div>
    </section>

### App admin with menu

#### Information

On mobile devices, the parent iframe overlay a toggle button over the iframe to toggle the parent frame menu.

Using the `menu` plugin, your iframe is able to connect its own menu with the parent's frame one. You simply need to add the class `menu-toggle-parent-frame` to your toggle button, which will also remove the parent frame toggle button that was initialy present as long as it's having the class `menu-toggle-hideable`.

    <div class="menu-toggle-hideable">
      <button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
              data-target="body" data-value="menu-open">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="sidebar" class="menu menu-fixed flex-col menu-folded">
      ...
    </nav>
    <nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
      ...
    </nav>
    <div class="sided-content-full">
      <iframe class="iframe-fullscreen"
              src="/embed/app_admin_with_menu__content/index.html"
              frameborder="0"></iframe>
    </div>

    <!-- iFrame content -->
    <nav class="menu menu-fixed flex-col menu-submenu menu-app">
      ...
    </nav>
    <div class="sided-content-with-menu">
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button"
                    class="navbar-toggle menu-toggle menu-toggle-parent-frame"
                    data-toggle="toggle"
                    data-target="body" data-value="menu-open">
              <span class="sr-only">Toggle Navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle navbar-toggle-context"
                    data-toggle="collapse" data-target=".navbar-top-collapse">
              <span class="sr-only">Toggle Navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand-container">
              <span class="navbar-brand">
                <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
              </span>
            </div>
          </div>
          <div class="collapse navbar-collapse navbar-top-collapse">
            <div class="navbar-right">
              <button class="btn btn-secondary navbar-btn" type="button">Button</button>
              <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
            </div>
          </div>
        </div>
      </nav>
      <section class="main-content">
        <div class="sheet">
          <p>...</p>
        </div>
      </section>
    </div>

### Section

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle navbar-toggle-context"
                  data-toggle="collapse" data-target=".navbar-top-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand-container">
            <span class="navbar-brand">
              <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
            </span>
          </div>
        </div>
        <div class="collapse navbar-collapse navbar-top-collapse">
          <div class="navbar-right">
            <button class="btn btn-secondary navbar-btn" type="button">Button</button>
            <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
          </div>
        </div>
      </div>
    </nav>
    <section class="main-content">
      <div class="sheet">
        <p>Body</p>
      </div>
    </section>

### Nested Section

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle navbar-toggle-context"
                  data-toggle="collapse" data-target=".navbar-top-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand-container">
            <span class="navbar-brand">
              <h1 class="text-overflow">
                <i class="icon-calendar"></i>
                <span class="navbar-breadcrumb hidden-xs">
                  <a href="#">Bookings</a>
                  /
                </span>
                A very long section name
              </h1>
            </span>
          </div>
        </div>
        <div class="collapse navbar-collapse navbar-top-collapse">
          <div class="navbar-right">
            <button class="btn btn-secondary navbar-btn" type="button">Button</button>
            <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
          </div>
        </div>
      </div>
    </nav>
    <section class="main-content">
      <div class="sheet">
        <p>Body</p>
      </div>
    </section>

### Section with flash

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle navbar-toggle-context"
                  data-toggle="collapse" data-target=".navbar-top-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand-container">
            <span class="navbar-brand">
              <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
            </span>
          </div>
        </div>
        <div class="collapse navbar-collapse navbar-top-collapse">
          <div class="navbar-right">
            <button class="btn btn-secondary navbar-btn" type="button">Button</button>
            <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
          </div>
        </div>
      </div>
    </nav>
    <section class="main-content">
      <div class="alert-container alert-container-top">
        <div class="alert alert-warning alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <strong>Warning!</strong> Better check yourself, you're not looking too good.
        </div>
      </div>
      <div class="sheet">
        <p>Body</p>
      </div>
    </section>

### Two columns

### Tabulated content

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      ...
    </nav>
    <section class="main-content">
      <div class="sheet">
        <ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
          <li class="active"><a href="#">Tab 1</a></li>
          <li><a href="#">Tab 2</a></li>
          <li class="dropdown pull-right stackable-dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              More <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
            </ul>
          </li>
        </ul>
        <div>
          <p>Text...</p>
        </div>
      </div>
    </section>

### Annotated section

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      ...
    </nav>
    <section class="main-content">
      <section class="annotated-section">
        <header class="annotated-section-annotation">
          <h2 class="annotated-section-title">Section Name</h2>
          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          <p><a href="#">More Information</a></p>
        </header>
        <div class="annotated-section-content">
          <p>Lorem ipsum dolor sit amet,...</p>
        </div>
      </section>
      <section class="annotated-section">
        <header class="annotated-section-annotation">
          <h2 class="annotated-section-title">Section Name</h2>
          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          <p><a href="#">More Information</a></p>
        </header>
        <div class="annotated-section-content">
          <p>Body</p>
        </div>
      </section>
    </section>

### Annotated section with tabulated content

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      ...
    </nav>
    <section class="main-content">
      <section class="annotated-section">
        <header class="annotated-section-annotation">
          <h2 class="annotated-section-title">Section Name</h2>
          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          <p><a href="#">More Information</a></p>
        </header>
        <div class="annotated-section-content">
          <ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
            <li class="active"><a href="#">Tab 1</a></li>
            <li><a href="#">Tab 2</a></li>
            <li class="dropdown pull-right stackable-dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                More <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
              </ul>
            </li>
          </ul>
          <div>
            <p>Body</p>
          </div>
        </div>
      </section>
    </section>

### Annotated section with frameless content

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      ...
    </nav>
    <section class="main-content">
      <section class="annotated-section">
        <header class="annotated-section-annotation">
          <h2 class="annotated-section-title">Section Name</h2>
          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
          <p><a href="#">More Information</a></p>
        </header>
        <div class="annotated-section-content annotated-section-content-frameless">
          <div class="panel panel-default">
            <div class="panel-body">
              <p>Panel 1</p>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-body">
              <p>Panel 2</p>
            </div>
          </div>
        </div>
      </section>
    </section>

### Fullscreen modal

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      ...
    </nav>
    <section class="main-content">
      <div class="sheet sheet-fullscreen">
        <p>Text...</p>
      </div>
    </section>