Back to home

Documentation

Table of contents

Introduction

Star Admin2 is a responsive HTML template that is based on the CSS framework Bootstrap 5 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Star Admin2 and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme please use Envato support form on our profile or email us at support@bootstrapdash.com

Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:

Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder

Installation

You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have node and npm installed in your computer.

Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed.

If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).

This will install the dev dependencies in the local node_modules folder in your root directory.

Then you will need to install Gulp. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.

This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

Basic structure

The below snippet shows the basic HTML structure of Star Admin2 . Please note that all the stylesheets and script files in the below snippet should be included to render Star Admin2 styles.

This section contains code of default vertical layout. For other layouts in vertical mode like boxed, icon-menu etc., you can follow the snippet same as below, but you have to just add the appropriate optional class to the body. More details of the classes are given in Options section

Components

Basic UI Elements

Button with the single color
Outlined
Sizes
Bootstrap Dropdown
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Dropdown Outlined
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Tables

To create a basic Twitter Bootstrap table, add the following code.

Bootstrap-table is an extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.

Usage

To use Bootstrap-table in your application, include the following files in <head>.

Add the following script files in <body>.

Activate Bootstrap table without writing JavaScript, set data-bs-toggle="table" on a normal table.

Charts

Chart.js is a simple yet flexible JavaScript charting for designers & developers.

Usage

To use Chart.js in your application, include the following files in <head>.

and the following script files in <body>.

To create a simple chart, add the following code:

Forms

The basic form elements can be added to your application as below:

Icons

Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.

Usage

To use Material Design Icons in your application, include the following files in <head>.

To generate an icon, add the following code:

Editors

Tinymce is a full-featured web editing tool.

Usage

To use Tinymce in your application, include the following files in <body>.

To create an editor using tinymce, add the following code:

X-editable allows you to create editable elements on your page. It can be used with any engine (Bootstrap, jQuery-UI, jQuery only) and includes both popup and inline modes.

Usage

To use x-editable in your application, include the following files in <head>.

Add the following script files in <body>.

To create a simple editable text field, add the following code:

Summernote is a super simple WYSIWYG Editor.

Usage

To use summernote in your application, include the following files in <head>.

Add the following script files in <body>.

To create a summernote editor, add the following code:

SimpleMDE is a simple, beautiful, and embeddable JavaScript Markdown editor.

Usage

To use simpleMDE in your application, include the following files in <head>.

Add the following script files in <body>.

To create an editor using simpleMDE, add the following code:

Quill is a free, open source WYSIWYG editor built for the modern web.

Usage

To use Quill in your application, include the following files in <head>.

Add the following script files in <body>.

To create an editor using Quill, add the following code:

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.

Usage

To use ace editor in your application, include the following files in <body>.

To create a code editor using ace with a sample code, add the following code:

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

Usage

To use CodeMirror in your application, include the following files in <head>.

Add the following script files in <body>.

Here is an example of an editor using CodeMirror.

Credits

We have used the following plugins in Star Admin2