Documentation

Introduction

Elisyam is the complete package that was built to help you create a custom and unique user interface for your project.

With Elisyam you’re not limited to creating a single page for your admin panel. You’ll have over many pre-built page templates to choose from, covering many popular scenarios and content types. Like the main admin demos, all the page templates are highly customizable.

You can add any of the pre-built UI elements to your design. The options are vast, with elements including buttons, badges, widgets, timeline, modals, progress bars, and more. They can all be customized to ensure they fit in or contrast with the rest of your dashboard as desired.

Elisyam is packed with pages that come complete with documented code to simplify the customization process.

Author: Saerox / David M

Elisyam supports all modern browsers (Chrome, Firefox, Safari) including Edge.

Installation

Elisyam is a simple static HTML template so it's simple to install it.

Just simple steps to follow:

HTML Files + assets

Folder Structure

HTML
  ├── assets
  |   └── css
  |   |   └── all css files
  |   |
  |   └── icons
  |   |   └── all icons files
  |   |
  |   └── img
  |   |   └── all img files
  |   | 
  |   └── js
  |   |   └── all javascript files
  |   |
  |   └── vendors
  |       └── all vendors css/javascript files
  |      
  └── all html files

Dark Version

All pages of Eisyam are available in dark version.

Just change the name of the css file: elisyam-1.0.css by elisyam-1.0-dark.css.

Same thing for javascript files: file.js by file-dark.js.

Add .min for minified files.

Fonts

We used google fonts, so you can change them easily.

                                                
<script>
    WebFont.load({
        google: {"families":["Montserrat:400,500,600,700","Noto+Sans:400,700"]},
        active: function() {
            sessionStorage.fonts = true;
        }
    });
</script>
                                                
                                            

Default Fonts: Montserrat and Noto Sans

Google Fonts

Icons

LineAwesome - <i class="la la-icon"></i>

Themify - <i class="ti ti-icon"></i>

Ionicons - <i class="ion-icon"></i>

Meteocons - <i class="meteocons-icon"></i>

Widgets

Basic widget structure

                                                
<div class="widget has-shadow">
    <div class="widget-header">
        <h2>Widget Header</h2>
    </div>
    <div class="widget-body">
        Content Body
    </div>
    <div class="widget-footer">
        Content Footer
    </div>
</div>
                                                
                                            

Widget Header With Border

                                                
<div class="widget-header bordered no-actions d-flex align-items-center">
    <h2>Widget Header With Border</h2>
</div>
                                                
                                            

Widget Header No Border

                                                
<div class="widget-header bordered no-actions d-flex align-items-center">
    <h2>Widget Header No Border</h2>
</div>
                                                
                                            

Widget Header With Actions

                                                
<div class="widget-header bordered no-actions d-flex align-items-center">
    <h2>Widget Header With Border</h2>
    <div class="widget-options">
        <div class="dropdown">
            <button type="button" id="actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
                <i class="la la-ellipsis-h"></i>
            </button>
            <div aria-labelledby="Actions" class="dropdown-menu">
                <a href="#" class="dropdown-item"> 
                    Options 1
                </a>
                <a href="#" class="dropdown-item"> 
                    Options 2
                </a>
                <a href="#" class="dropdown-item"> 
                    Options 3
                </a>
            </div>
        </div>
    </div>
</div>
                                                
                                            

Widget Header With Button

                                                
<div class="widget-header bordered no-actions d-flex align-items-center">
    <h2>Widget Header With Border</h2>
    <div class="widget-options">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary">Button 1</button>
            <button type="button" class="btn btn-primary">Button 2</button>
        </div>
    </div>
</div>
                                                
                                            

Utilities

Bootstrap Utilities

Text Color

Class Results
.text-primary Lorem ipsum dolor sit amet consectecur.
.text-secondary Lorem ipsum dolor sit amet consectecur.
.text-success Lorem ipsum dolor sit amet consectecur.
.text-info Lorem ipsum dolor sit amet consectecur.
.text-warning Lorem ipsum dolor sit amet consectecur.
.text-danger Lorem ipsum dolor sit amet consectecur.
.text-gradient-01 Lorem ipsum dolor sit amet consectecur.
.text-gradient-02 Lorem ipsum dolor sit amet consectecur.
.text-gradient-03 Lorem ipsum dolor sit amet consectecur.
.text-gradient-04 Lorem ipsum dolor sit amet consectecur.
.text-gradient-05 Lorem ipsum dolor sit amet consectecur.
.text-dark Lorem ipsum dolor sit amet consectecur.

Background Color

Class Results
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-dark
.bg-white
.bg-gradient-01
.bg-gradient-02
.bg-gradient-03
.bg-gradient-04
.bg-gradient-05