MAIN HEADER

Elektron: An Admin Layout

Follow @onokumus Star Download

Install

Install with npm:

$ npm install --save elektron

Install with yarn

$ yarn add elektron

Download

Download Link

HTML Structure

.elk-app class should be added to div element inside the body tag.

Basic Template

Start with this basic HTML template.
 <!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Admin</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css/normalize.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/onoffcanvas@1.1.2/dist/onoffcanvas.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elektron/dist/elektron.min.css">

</head>

<body>

  <!-- BEGIN .elk-app -->
  <div class="elk-app">

    <!-- BEGIN .elk-wrap -->
    <div class="elk-wrap">
      <!-- BEGIN .elk-header -->
      <header class="elk-header ">
        <a class="onoffcanvas-toggler is-animated" href="#elk-side" data-toggle="onoffcanvas"></a>
      </header>
      <!-- END:  .elk-header -->
      <!-- BEGIN .elk-container -->
      <div class="elk-container">

        <!-- BEGIN .elk-side -->
        <aside class="elk-side " id="elk-side" aria-expanded=false>

          <!-- BEGIN .elk-side-content -->
          <div class="elk-side-content ">
            <!-- BEGIN .elk-side-nav -->
            <nav class="elk-side-nav">

              <!-- BEGIN: elk-side-nav-content -->
              <ul class="metismenu" id="metismenu">

                <li>
                  <a class="active" href="index.html">
                    <span class="has-icon">
                      <i class="fa fa-cogs"></i>
                    </span>
                    <span class="nav-title">Dashboard</span>
                  </a>
                </li>

                <li>
                  <a href="#" class="has-arrow" aria-expanded=false>
                    <span class="has-icon">
                      <i class="fa fa-pagelines"></i>
                    </span>
                    <span class="nav-title">Menu</span>
                  </a>
                  <ul aria-expanded=false>
                    <li>
                      <a href="#">Menu Item</a>
                    </li>
                  </ul>
                </li>

              </ul>
              <!-- END: elk-side-nav-content -->
            </nav>
            <!-- END: .elk-side-nav -->
          </div>
          <!-- END: .elk-side-content -->
          <!-- BEGIN .elk-side-footer -->
          <footer class="elk-side-footer">
            ...
          </footer>
          <!-- END .elk-side-footer -->

        </aside>
        <!-- END: .elk-side -->

        <!-- BEGIN .elk-main -->
        <div class="elk-main">

          <!-- BEGIN .elk-main-heading -->
          <header class="elk-main-header">
            ...
          </header>
          <!-- END: .elk-main-header -->
          <!-- BEGIN .elk-main-content -->
          <div class="elk-main-content">

            ...

          </div>
          <!-- END: .elk-main-content -->
          <!-- BEGIN .elk-main-footer -->
          <footer class="elk-main-footer">
            ...
          </footer>

          <!-- END: .elk-main-footer -->

        </div>
        <!-- END: .elk-main -->

      </div>
      <!-- END: .elk-container -->

      <!-- begin .elk-footer -->
      <footer class="elk-footer ">
        ...
      </footer>
      <!-- END: .elk-footer -->
    </div>
    <!-- END: .elk-wrap -->

  </div>
  <!-- END: .elk-app -->

  <!-- jQuery first, then other JS. -->
  <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/metismenu" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/onoffcanvas@1.1.2/dist/onoffcanvas.min.js" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/elektron" charset="utf-8"></script>
</body>

</html>

Class structure

class required multiple
.elk-app not required for ember.js project, otherwise required no
.elk-wrap required no
.elk-header no yes
.elk-container required no
.elk-footer no yes
.elk-side no yes
.elk-side-header no yes
.elk-side-content no (required, if .app-side ) no
.elk-side-footer no no
.elk-main required no
.elk-main-header no yes
.elk-main-content required no
.elk-main-footer no yes

Fixed Page Options

elk-app fixed

Elektron is fluid by default. Can be used as fixed on will. All that's needed to be done is to add .is-fixed class to elk-app element.

<div class="elk-app is-fixed">
  ...
</div>

elk-main fixed

All that's needed to be done is to add .is-fixed class to elk-app and is-fixed class to elk-main elements. For example :

  <div class="elk-app is-fixed">
    <div class="elk-main is-fixed">
      ...
    </div>
  </div>

sticky top bar

<!-- BEGIN .elk-header -->
<header class="elk-header is-sticky">
    <a href="#elk-side" data-toggle="onoffcanvas" class="onoffcanvas-toggler" aria-expanded=false>
    <span>APP HEADER
</header>
<!-- END:  .elk-header -->

sticky bottom bar


<footer class="elk-footer is-sticky is-bottom">
    <p>
      elektron v1.0.0 2018
    </p>
</footer>

MAIN FOOTER

elektron v0.4.1 2018