Documentation
Introduction
Lettstart Design 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 Lettstart Design 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.
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:
Installation
You need to install ruby and compass as Dependencies for this project if you want to customize it. To do this, you must have ruby in your computer.
Installation guide of the ruby can be found here.
If you have installed them, run the following command in your ruby command prompt or terminal (for the mac users).
Then you will need to install Compass. We use the compass task manager for the scss development processes. compass will watch for changes to the SCSS files and automatically compile the files to CSS.
SCSS site is a great place to get information on installing SCSS if you need more information.
Getting started with compass is pretty simple. The Compass site is a great place to get information on installing Compass if you need more information.
This installs Compass globally to your machine. The other thing that Compass requires, which, is really what does all the work, is the config.rb. In this file, you set up all of your css, images, fonts, js directories 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 compass and whenever a file is modified, the SCSS files will be compiled to create the CSS file.
compass watch
command
from the directory where the config.rb is located.
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 Lettstart Design Admin. Please note that all the stylesheets and script files in the below snippet should be included to render Lettstart Design 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.