Elektron: An Admin Toolkit


Install with npm:

$ npm install --save elektron

Install with bower

$ bower install elektron --save


Download Link

HTML Structure

.app class should be added to div element inside the body tag. If you will use the Elektron with ember.js, you don't need this element.

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


  <link rel="stylesheet" href="assets/vendor/metismenu/metisMenu.min.css">
  <link rel="stylesheet" href="assets/vendor/onoffcanvas/onoffcanvas.min.css">
  <link rel="stylesheet" href="assets/css/elektron.css">
  <link rel="stylesheet" href="assets/css/elektron-demo.css">



    <!-- not required for ember.js -->
    <!-- BEGIN .app -->
    <div class="app">

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

        <!-- BEGIN .app-heading -->
        <header class="app-heading">
          <a href="#app-side" data-toggle="onoffcanvas">
        <!-- END:  .app-heading -->

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

          <!-- BEGIN .app-side -->
          <aside class="app-side" id="app-side">

            <!-- BEGIN .side-content -->
            <div class="side-content">
            <!-- END: .side-content -->

            <!-- BEGIN .side-footer -->
            <footer class="side-footer">
            <!-- END .side-footer -->

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

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

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

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

                <!-- Content is here -->

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

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

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

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

        <!-- begin .app-footer -->
        <footer class="app-footer">

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

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

    <!-- END: .app -->

    <!-- jQuery first, then other JS. -->
    <script src="assets/vendor/jquery/jquery.min.js" charset="utf-8"></script>
    <script src="assets/vendor/metismenu/metisMenu.min.js" charset="utf-8"></script>
    <script src="assets/vendor/onoffcanvas/onoffcanvas.min.js" charset="utf-8"></script>
    <script src="assets/js/elektron.js" charset="utf-8"></script>

Class structure

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

Fixed Page Options

app fixed

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

main fixed

All that's needed to be done is to add .main-is-fixed class to body element.

sticky top bar

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

sticky bottom bar

<!-- begin .app-footer -->
<footer class="app-footer is-sticky is-bottom">
      elektron v0.3.1 2017
<!-- END: .app-footer -->