Basic Layout

App

Looper layout should be wrapped into the .app component.

<!-- .app -->
<div class="app">
  <!-- app layout goes here -->
</div>
<!-- /.app -->

As Looper comes with some layout variants that you can see on the Demo Pages. The app component give you ability to control layout variants. For example if you want to clipped the header to align the app content, you just need to add .has-clipped-header class into app component.

Looper has 3 layout components (header, aside, and page content), each component are not required but recommended. Lets see the basic template for each part. Please refer to Layouts Demo template for more details.

<!-- .app -->
<div class="app">
  <!-- .app-header -->
  <header class="app-header app-header-dark">
    <!-- your brand and navigations goes here -->
  </header>
  <!-- /.app-header -->

  <!-- .app-aside -->
  <aside class="app-aside app-aside-light app-aside-expand-md">
    <!-- the app navigations goes here -->
  </aside>
  <!-- /.app-aside -->

  <!-- .app-main -->
  <main class="app-main">
    <!-- .wrapper -->
    <div class="wrapper">
      <!-- your awesome app content goes here -->
    </div>
    <!-- /.wrapper -->
  </main>
  <!-- /.app-main -->
</div>
<!-- /.app -->

Header

<header class="app-header app-header-dark">
  <!-- .top-bar -->
  <div class="top-bar">
    <!-- .top-bar-brand -->
    <div class="top-bar-brand">
      <a href="/">
        <img src="assets/images/brand.png" height="32px" alt="">
      </a>
    </div>
    <!-- /.top-bar-brand -->

    <!-- .top-bar-list -->
    <div class="top-bar-list">
      <!-- .top-bar-item -->
      <div class="top-bar-item px-2 d-md-none d-lg-none d-xl-none">
        <!-- toggle menu -->
        <button class="hamburger hamburger-squeeze" type="button" data-toggle="aside" aria-label="Menu" aria-controls="navigation">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>
        <!-- /toggle menu -->
      </div>
      <!-- /.top-bar-item -->

      <!-- .top-bar-item -->
      <div class="top-bar-item top-bar-item-full">
        <!-- .top-bar-search -->
        <div class="top-bar-search">
          <div class="input-group input-group-search">
            <div class="input-group-prepend">
              <span class="input-group-text">
                <span class="oi oi-magnifying-glass"></span>
              </span>
            </div>
            <input type="text" class="form-control" aria-label="Search" placeholder="Search">
          </div>
        </div>
        <!-- /.top-bar-search -->
      </div>
      <!-- /.top-bar-item -->

      <!-- .top-bar-item -->
      <div class="top-bar-item top-bar-item-right px-0 d-none d-sm-flex">
        <!-- .nav -->
        <ul class="header-nav nav">
          <!-- .nav-item -->
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span class="oi oi-grid-three-up"></span>
            </a>
          </li>
          <!-- /.nav-item -->
        </ul>
        <!-- /.nav -->

        <!-- .btn-account -->
        <div class="dropdown">
          <button class="btn-account d-none d-md-flex" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="user-avatar">
              <img src="assets/images/avatars/profile.jpg" alt="">
            </span>
            <span class="account-summary pr-lg-4 d-none d-lg-block">
              <span class="account-name">John Doe</span>
              <span class="account-description">@johndoe</span>
            </span>
          </button>
          <!-- .dropdown-menu -->
          <div class="dropdown-menu">
            <div class="dropdown-arrow"></div>
            <h6 class="dropdown-header d-none d-md-block d-lg-none">John Doe</h6>
            <a class="dropdown-item" href="#"><span class="dropdown-icon oi oi-person"></span> Profile</a>
            <a class="dropdown-item" href="#"><span class="dropdown-icon oi oi-account-logout"></span> Logout</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Help Center</a>
            <a class="dropdown-item" href="#">Ask Forum</a>
            <a class="dropdown-item" href="#">Keyboard Shortcuts</a>
          </div>
          <!-- /.dropdown-menu -->
        </div>
        <!-- /.btn-account -->
      </div>
      <!-- /.top-bar-item -->
    </div>
    <!-- /.top-bar-list -->
  </div>
  <!-- /.top-bar -->
</header>

Aside

<aside class="app-aside app-aside-light app-aside-expand-md">
  <!-- .aside-content -->
  <div class="aside-content">
    <!-- .aside-header -->
    <header class="aside-header d-block d-md-none">
      <!-- .btn-account -->
      <button class="btn-account" type="button" data-toggle="collapse" data-target="#dropdown-aside">
        <span class="user-avatar user-avatar-lg">
          <img src="assets/images/avatars/profile.jpg" alt="">
        </span>
        <span class="account-icon">
          <span class="fa fa-caret-down fa-lg"></span>
        </span>
        <span class="account-summary">
          <span class="account-name">John Doe</span>
          <span class="account-description">@johndoe</span>
        </span>
      </button>
      <!-- /.btn-account -->

      <!-- .dropdown-aside -->
      <div id="dropdown-aside" class="dropdown-aside collapse">
        <!-- dropdown-items -->
        <div class="pb-3">
          <a class="dropdown-item" href="#"><span class="dropdown-icon oi oi-person"></span> Profile</a>
          <a class="dropdown-item" href="#"><span class="dropdown-icon oi oi-account-logout"></span> Logout</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Help Center</a>
          <a class="dropdown-item" href="#">Ask Forum</a>
          <a class="dropdown-item" href="#">Keyboard Shortcuts</a>
        </div>
        <!-- /dropdown-items -->
      </div>
      <!-- /.dropdown-aside -->
    </header>
    <!-- /.aside-header -->

    <!-- .aside-menu -->
    <section class="aside-menu perfect-scrollbar">
      <!-- .stacked-menu -->
      <nav id="stacked-menu" class="stacked-menu">
        <!-- .menu -->
        <ul class="menu">
          <li class="menu-header">Menus</li>
          <!-- .menu-item -->
          <li class="menu-item">
            <!-- .menu-link -->
            <a href="#" class="menu-link">
              <span class="menu-icon oi oi-dashboard"></span>
              <span class="menu-text">Dashboard</span>
              <span class="badge badge-success">20+</span>
            </a>
            <!-- /.menu-link -->
          </li>
          <!-- /.menu-item -->
        </ul>
        <!-- /.menu -->
      </nav>
      <!-- /.stacked-menu -->
    </section>
    <!-- /.aside-menu -->
  </div>
  <!-- /.aside-content -->
</aside>

Page content

<!-- .app-main -->
<main class="app-main">
  <!-- .wrapper -->
  <div class="wrapper">
    <!-- .page -->
    <div class="page">
      <!-- .page-inner -->
      <div class="page-inner">
        <!-- .page-title-bar -->
        <header class="page-title-bar">
          <!-- page title stuff goes here -->
          <h1 class="page-title">Page title</h1>
        </header>
        <!-- /.page-title-bar -->

        <!-- .page-section -->
        <div class="page-section">
          <!-- page content goes here -->
          <p>Hellow world!</p>
        </div>
        <!-- /.page-section -->
      </div>
      <!-- /.page-inner -->
    </div>
    <!-- /.page -->
  </div>
  <!-- /.wrapper -->
</main>
<!-- /.app-main -->