UI Layouts

2 App Layout

<div class="amui-l-app-layout">

  <nav class="amui-o-top-bar navbar">
    <!-- Here your top bar navigation content -->
  </nav>  <!-- Organism : Top bar -->

  <div id="navbar-collapse" class="amui-l-app-layout__wrapper">

    <ul class="amui-o-sidebar-nav">
      <!-- Here your sidebar navigation content -->
    </ul>  <!-- Organism : Sidebar navigation -->

    <main role="main" class="amui-l-app-layout__main">
      <div class="container-fluid">
        <div class="amui-l-page-header amui-g-grid row">
          <div class="amui-g-grid__item">
            <!-- Here your page header content -->
          </div>
        </div>  <!-- Page header section -->
        <div class="amui-g-grid row amui-l-page">
          <div class="amui-g-grid__item">
            <!-- Here your page content -->
          </div>
        </div>  <!-- Page section -->
      </div>  <!-- Fluid container -->
    </main>  <!-- Main container -->

  </div>  <!-- App layout wrapper -->

  <footer role="contentinfo" class="amui-m-footer amui-l-app-layout__footer panel-default">
    <!-- Here your footer content -->
  </footer>  <!-- Footer -->

</div>  <!-- App layout -->

3 App Layout : Environnement de test

Pour afficher le fond d'écran de l'environnement de test ajouter la class is--env-test à la balise main

<div class="amui-l-app-layout">

  <nav class="amui-o-top-bar navbar">
    <!-- Here your top bar navigation content -->
  </nav>  <!-- Organism : Top bar -->

  <div id="navbar-collapse" class="amui-l-app-layout__wrapper">

    <ul class="amui-o-sidebar-nav">
      <!-- Here your sidebar navigation content -->
    </ul>  <!-- Organism : Sidebar navigation -->

    <main role="main" class="amui-l-app-layout__main is--env-test">
      <div class="container-fluid">
        <div class="amui-l-page-header amui-g-grid row">
          <div class="amui-g-grid__item">
            <!-- Here your page header content -->
          </div>
        </div>  <!-- Page header section -->
        <div class="amui-g-grid row amui-l-page">
          <div class="amui-g-grid__item">
            <!-- Here your page content -->
          </div>
        </div>  <!-- Page section -->
      </div>  <!-- Fluid container -->
    </main>  <!-- Main container -->

  </div>  <!-- App layout wrapper -->

  <footer role="contentinfo" class="amui-m-footer amui-l-app-layout__footer panel-default">
    <!-- Here your footer content -->
  </footer>  <!-- Footer -->

</div>  <!-- App layout -->
← Container Page header →