Thank you very much for your purchase!

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Introduction

Simulor is a premium and multi featured bootstrap 4 admin template with flat design. It is built using html5, css3 and other modern frontend technologies. The flexibility around choosing the layout options and great collection of reusable widgets, components, elements etc allows you to easily build a web application including custom admin panel, project management system, crm, cms, etc. It is fully responsive and works on all major web browsers, desktop and all smart phone devices.

We really care for our buyers and so in case if you have any question or feedback, please feel free to get back to us.

Structure

I have tried to follow the standards and modular structure while developing the theme. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.

File & Folder Structure


├── dist
│   └── assets
│          └── fonts
│          └── images
│   └── css
│   └── js
│   └── Html Files
├── src/
│   └── assets
│          └── fonts
│          └── images
│   └── html
│   └── js
│   └── scss
├── gulpfile.js
├── package.json
└── package-lock.json

HTML Structure

CSS & SCSS

Scss is a CSS pre-processor and it extends the CSS language, adding features that allow variables, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Scss runs inside Node, in the browser and inside Rhino.

Files are explained below:

File Description
app.scss/app.css This is main style file. The scss version is importing all the custom scss files. Each of the scss file is containing style for speicic element. E.g Buttons, checkbox, icons, forms, etc.

Javascript

Simulor uses jQuery, Bootstrap JS framework(at its core) and some of the third-party plugins. There are may more third party plugin which you can use according to your needs. The css is already containing matching style for these plugins so you will not need to do anything around it.

Files are explained below:

File Description
vendor.js / vendor.min.js These file are used at core of the theme.
app.js This is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc. Also it contains the definition of some of the key components (e.g. notifications, portlet, etc) and code (for self-initialization) related to some of the controls (e.g. modal, range-slider, switchery, multiselect, etc).
*.js These are the files containing pages specific code. They are mainly used for demo purpose.

Getting Started

We are using gulp which allows to have complete automatation for build flow. In case if you don't know - Gulp is a gulp is a toolkit for automating painful or time-consuming tasks in development workflow, so you can stop messing around and build something. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

  • Install nodejs and gulp

    If you have already installed nodejs and gulp, you can skip this step

    1. Make sure to have the latest version of Node.js installed & running in your computer
    2. Open your terminal and install gulp globally. You can use command npm install -g gulp
  • Install dependencies

    Go to your folder and enter the command npm install. This would install all dependencies in node_modules folder.

After you finished with above two steps, you can run the automated tasks (as described below) to build the application.

Command Description
gulp It runs the watch command and starts a development server in 'http://localhost:3000/'. You can modify your html, sass and js files and it automatically compiles the sass into css, sync your html or js file change.

Layouts

You can customize various elements including navbar, topbar, form elements etc by simply editing Sass files in /src/scss directory or removing unneeded components from app.scss source files.

Layout Option Description
Dark leftbar

To have a dark left menu, add class "left-side-menu-dark" on ".left-side-menu" element.

E.g. <div class="left-side-menu left-side-menu-dark">

Small leftbar

To have a small left menu, add class "left-side-menu-sm" on ".left-side-menu" element.

E.g. <div class="left-side-menu left-side-menu-sm">

Light topbar

To have a light topbar, add class "navbar-custom-light" on ".navbar-custom" element.

E.g. <div class="navbar-custom navbar-custom-light">

Support

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

Stay Awesome!

- Coderthemes

Change Log

Version 1.0.0     19 July 2018

  • Initial released

© 2018 mellatweb.com