Documentation
Introduction
Letstart Admin is a responsive HTML template that is based on the CSS framework Bootstrap 4 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 Letstart Admin 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 email at template monster support ticket.
Please give 5 star rating to our template, as rating will help other people to trust our template.
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. You'll see something like this:
Dependencies
- Gulp
- Bootstrap
- SaSS
- Node
Support
We are committed to our customers and support is at up most priority. If you have any question, issue with Letstart Admin, please feel free to contact us anytime by following ways: We have also planned to add tons of updates and improvements which you will receive free of cost.
To report bug. Kindly generate ticket on template monster portal.
What's includes
- Answering your questions or problems regarding the template.
- Giving or Solving bugs report by you.
What's not includes
- Customization Work
- Support for third party plugins.
- Support or guide how to integrate with backend technologies(like php, java, .net, etc).
Browser Support
Letstart admin template is built to work in the latest desktop and mobile and tablet browsers.
- Chrome (latest)
- FireFox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
Installation
Download a Package Source From our Store.
Install Node.js From https://nodejs.org/en/download/
After that open command promt or any other terminal and go to Package Path.
cd [root] / code /
Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.
npm install --global npm@latest
To check weather is node succesfully install or not.
npm --version
For yarn package manager.
npm install --global yarn
To check weather is yarn succesfully install or not.
yarn --version
Now, run the below command(This command will install the necessary libraries in node_modules folder which is generated by this command):
npm install
Normally project will run on the localhost:3000 or it will take port accordingly and for run the project run the below command:
gulp default or npm start
How to Install npm dependencies?
In your root folder enter the following command to install the project dependencies:
npm install, this command will install all the template libraries inside the
node_modules folder.
How to Install npm packages?
npm install packagename, this command will install the package in node modules.
Layout Configurations
We have provided a bunch of layout options for you with a single class change! You can use the following classes for each layout.
| Layout | Class to be added on the body tag |
|---|---|
| Icon menu | small-nav |
| Fixed Layout | fixed-layout |
| Fixed Header | fixed-header |
| Navbar Background | bg-warning, bg-danger, bg-primary |
| Sidebar Background | sidebar-light, sidebar-dark, bg-warning, bg-danger, bg-primary |
Basic structure
The below snippet shows the basic HTML structure of Letstart Admin. Please note that all the stylesheets and script files in the below snippet should be included to render Letstart Admin styles.
Components
Basic UI Elements
Bootstrap Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin
Button with the single color
Button with Outline
Button Sizes
Badges
Card
Titles, text, and links
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereBorder Rounded Pagination
Basic Dropdowns
Bootstrap Modal
Line Tab
To make tab responsive add tabs-container with nav class
and wrap <ul> with div with tab-responsive class.
Basic UI Elements 2
Breadcrumb
Progress Bar
Default Tooltips
Notifications
Thumbnail
Miscellaneous
Dragula ,Drag and drop so simple it hurts.
Usage
To use Dragula in your application, include the following files in <head>.
Add the following script files in <body>.
To create a drag n drop list, add the following code:
Clipboard, a modern approach to copy text to the clipboard.
Usage
Add the following script files in <body>.
To create a clipboard, add the following code:
noUiSlider is a range slider without bloat.
Usage
To use NoUISlider in your application, include the following files in <head>.
Add the following script files in <body>.
To create a slider, add the following code:
Easy, flexible and responsive range slider with skin support. Click Here to see the official documentation.
Usage
To use Range Slider in your application, include the following files in <head>.
Add the following script files in <body>.
To create a slider, add the following code:
Owl Carousel is a simple and easy slider.
Usage
To use Owl Carousel in your application, include the following files in <head>.
Add the following script files in <body>.
To create a carousel, add the following code:
Tables
To create a basic Twitter Bootstrap table, add the following code.
Data 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>.
To create a data table, add the following code:
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 <body>.
To create a simple chart, add the following code:
C3 is a simple yet flexible JavaScript charting for designers & developers.
Usage
To use C3 in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple chart, add the following code:
Chartist is a simple JavaScript charting library for designers & developers.
Usage
To use Chartist in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple chart, add the following code:
Dygraphs is a simple JavaScript charting library for designers & developers.
Usage
To use Dygraph in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple chart, add the following code:
Flot chart is a simple JavaScript charting library for designers & developers.
Usage
To use Flot js in your application, include the following files in <body>.
To create a simple chart, add the following code:
Morris is a simple JavaScript charting library for designers & developers.
Usage
To use Morris in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple chart, add the following code:
Plottable js is a simple JavaScript charting library for designers & developers.
Usage
To use Plottable js in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple chart, add the following code:
Maps
JvectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.
Usage
To use Vector map in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple map, add the following code:
Forms
The basic form elements can be added to your application as below:
We are using Jquery validation for creating simple clientside form validation.
Usage
To use jquery validation in your application, include the following files in <head>.
The following code shows validation of a simple form:
We are using Jquery Smart Wizard for creating simple smart wizard.
Usage
To use Smart Wizard in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple wizard, add the following code:
We are using Bootstrap Duallist for creating Bootstrap Duallist.
Usage
To use Bootstrap Duallist in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple wizard, add the following code:
Selects and Tags
We are using Bootstrap Select for creating select.
Usage
To use Bootstrap Select in your application, include the following files in <head>.
Add the following script files in <body>
To create a Bootstrap Select, add the following code:
We are using Bootstrap multiselect for creating multiselect dropdown.
Usage
To use Bootstrap multiselect in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Bootstrap multiselect, add the following code:
We are using Select2 for creating multiselect dropdown.
Usage
To use Select2 in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Select2, add the following code:
We are using Select2 for creating multiselect dropdown.
Usage
To use Select2 in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Select2, add the following code:
Pickers
We are using Bootstrap DatePicker for creating datepicker.
Usage
To use Bootstrap DatePicker in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Bootstrap Datepicker, add the following code:
We are using Pignose Calender for creating stylish calender.
Usage
To use Pignose Calender in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Pignose Calender, add the following code:
We are using Date Range Picker for creating date range picker.
Usage
To use Date Range Picker in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Bootstrap Date Range Picker, add the following code:
We are using Jquery Minicolors for creating Color picker.
Usage
To use Color Picker in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Color Picker, add the following code:
Editors
We are using Bootstrap Markdown for creating editor.
Usage
To use Bootstrap Markdown in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Bootstrap Markdown, add the following code:
We are using Quill for creating editor.
Usage
To use Quill in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Quill, add the following code:
We are using Simple MDE markdown for creating editor.
Usage
To use Simple MDE markdown in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Simple MDE markdown, add the following code:
File Upload
We are using Dropzone for creating file upload.
Usage
To use Dropzone in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Dropzone, add the following code:
We are using Flow js for creating editor.
Usage
To use Flow js in your application, include the following files in <body>.
To create a File upload with flow js, add the following code:
Icons
We are using Material Design Icons for creating google icon.
Usage
To use Material Design Icons in your application, include the following files in <head>.
To generate an icon, add the following code:
We are using Font Awesome for creating icon.
Usage
To use Font Awesome Icons in your application, include the following files in <head>.
To generate an icon, add the following code:
We are using Simple Line Icons for creating icon.
Usage
To use Simple Line Icons in your application, include the following files in <head>.
To generate an icon, add the following code:
Credit
We have used the following plugins in letstart admin
- Bootstrap
- Bootstrap Datepicker
- Bootstrap Daterangepicker
- Bootstrap Duallist
- Bootstrap Multiselect
- Bootstrap Select
- Bootstrap Taginput
- C3
- D3
- Chartjs
- Chartist
- Dygraph
- Morris
- Plottable
- Flot
- Easy Piechart
- JQuery Sparkline
- J Vector Maps
- JQuery
- Jquery Validation
- JQuery Context menu
- Datatable
- Clipboard
- Select2
- Codemirror
- Dropzone JS
- Flowjs
- Dragula
- Smart Wizard
- Ion range slider
- No UI Slider
- Jquery Minicolors
- Html5shiv
- Respondjs
- Owl Carousel
- Pignose Calender
- Full Calender
- Mdi Icons
- Fontawesome
- Simple Line Icons
- Bootstrap Markdown
- Simple MDE Editor
- Summer Note Editor
- Quill Editor
- Pace
Please note that all product images are presented only for the demo purposes and cannot be used in your projects.
All images are licensed under CC0 License.