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>