• Default Theme

  • Night Mode Theme

  • RTL Version

  • Horizontal Version

Epic HR
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Epic HR

Introduction

Mark all as read

  • 7 New Feedback Today

    It will give a smart finishing to your site

  • New User 10:45

    I feel great! Thanks team

  • Server Warning 10:50

    Your connection is not private

  • Issue Fixed 11:05

    WE have fix all Design bug with Responsive

  • 7 New Orders 11:35

    You received a new oder from Tina.
Mark all as read
Profile Settings 6 Inbox Message
Need help? Sign out

Introduction

We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you’ll be able to manage and visualize different types of data in the easiest possible way!

Epic is a popular open source WebApp template for admin dashboards and admin panels. It’s responsive HTML template, which is based on the Bootstrap 4X framework. It utilizes all of the Bootstrap components in design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications.

Epic is based on a modular design, which allows it to be easily customised and built upon any backend project in no-time. Our documentation will guide you through installing the template and exploring the various components that are bundled with the template.

Grunt File & Installation

The JavaScript Task Runner.

Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.

Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `assets/scss/filename.scss` and output a plain-css file to `/assets/css/filename.css`.

Grunt JSHint: Run grunt jshint command from your project directory. It will checks all *.js files under `assetsjs/filename` for common syntax or coding errors using the JSHint utility.

Grunt Sprite: Run grunt sprite command from your project directory.

Further help: To get more help on the grunt checkout Grunt

Note: However, any SASS code you write must be able compile via Grunt as well.It will generate pre-compiled javascript templates. Reads all the *.html files from `assets/js/filename` and outputs `assets/js/filename.templates.js`. Template.js will contains code of UI design and will be change each time you build solution through above command.

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

SCSS Structure

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup.

Folder Structure

HTML/
├── assets
    ├── bundles/
    ├── css/
    ├── fonts/
    ├── images/
    ├── js/
    ├── plugins/
    ├── sass/
├── dark
    ├── assets
        ├── css/
        ├── js/
    ├── HTML
├── doc
├── main
    ├── assets
        ├── css/
        ├── js/
    ├── HTML
├── rtl
    ├── assets
        ├── css/
        ├── js/
    ├── HTML
├── theme3
    ├── assets
        ├── css/
        ├── js/
    ├── HTML

Layout Option

  • Dark Menu
    Add class in main body tag .sidebar_dark
  • Menu with Grid
    Add Class .grid with .metismenu
  • Mini Dark Menu
    Add Class .dark with .header_top
  • Menu Collapse
    Add class in main body tag .offcanvas-active
  • RTL Version
    Add class in main body tag .rtl
  • RTL Menu Collapse
    Add class in main body tag .rtl with .offcanvas-active
  • Header Dark
    Add Class .top_dark with #page_top
  • Header Top Fix
    Add Class .sticky-top with #page_top
  • Header Dark with top sticky
    Add Class .top_dark & .sticky-top with #page_top
  • Full Dark
    Add class in main body tag .dark-mode

Color Themes

We create bautifull pre-build color theme 
HTML/
├── assets
    ├── css/
        ├── dark.css/
        ├── main.css/
        ├── theme1.css/
        ├── theme2.css/
        ├── theme3.css/
    ├── sass/
        ├── skins/
            ├── dark.scss/
            ├── theme1.scss/
            ├── theme2.scss/
            ├── theme3.scss/

Font Used

Google fonts are used in the template. They are as follows: Source Sans Pro

Font Awesome: Click to See

All Images are used: Pexels.com