Elisyam 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
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
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>
<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>
Music Player
assets > js > music > music-player.js
You can add multiple files, to change just press the previous and next buttons on the player.
Some examples below:
songs = [{
src: "folder/Song Example.mp3", // mp3 file
title: "Artist/Group Name - Song Name", // Title
coverart: "assets/img/music/img.jpg" // Image
}, {
src: "folder/song example.mp3",
title: "Artist/Group Name - Song Name",
coverart: "assets/img/music/img.jpg"
}, {
src: "folder/song-example.mp3",
title: "Artist/Group Name - Song Name",
coverart: "assets/img/music/img.jpg"
}, ];
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 |
References
Text Color
Term | Website |
---|---|
Animate | https://daneden.github.io/animate.css/ |
Bootstrap | https://getbootstrap.com |
Bootstrap Select | https://github.com/VinceG/twitter-bootstrap-wizard |
Bootstrap Wizard | https://github.com/VinceG/twitter-bootstrap-wizard |
Chart Js | https://www.chartjs.org/ |
Circle Progress | https://kottenator.github.io/jquery-circle-progress/ |
Countdown | https://hilios.github.io/jQuery.countdown/ |
Full Calendar | https://fullcalendar.io/ |
Google Fonts | https://fonts.google.com/ |
Ionicons | https://ionicons.com/ |
Leaflet | https://leafletjs.com/ |
LineAwesome | https://icones8.fr/line-awesome |
Lity | https://sorgalla.com/lity/ |
Meteocons | https://www.alessioatzeni.com/meteocons/ |
Nicescroll | https://nicescroll.areaaperta.com/ |
Noty | https://ned.im/noty/#/ |
Owl Carousel 2 | https://owlcarousel2.github.io/OwlCarousel2/index.html |
Shutterstock | https://www.shutterstock.com/ |
Themify | https://themify.me/themify-icons |
Unsplash | https://unsplash.com/ |