Elektron Logo

Elektron: An Admin Layout

Star Fork Download


Install with npm:

$ npm install --save elektron

Install with yarn

$ yarn add elektron


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">

  <!-- 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 -->

  <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/metismenujs/dist/metismenujs.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elektron/dist/elektron.min.css">



  <!-- 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>
      <!-- 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">

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

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

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

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

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

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


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

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

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

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

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

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

  <script src="https://cdn.jsdelivr.net/npm/metismenujs" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/onoffcanvas/dist/onoffcanvas.min.js" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/elektron" charset="utf-8"></script>


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">

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">

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></a>
    <span>APP HEADER</span>
<!-- END:  .elk-header -->

sticky bottom bar

<!-- begin .elk-footer -->
 <footer class="elk-footer is-sticky is-bottom">
      elektron v0.5.2 2018
<!-- END: .elk-footer -->

elektron v0.5.3 2018