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.
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:
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.
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 |
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.
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
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
To make tab responsive add tabs-container
with nav
class
and wrap <ul>
with div with tab-responsive
class.
Dragula ,Drag and drop so simple it hurts.
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.
Add the following script files in <body>.
To create a clipboard, add the following code:
noUiSlider is a range slider without bloat.
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.
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.
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:
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.
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:
Chart.js is a simple yet flexible JavaScript charting for designers & developers.
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.
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.
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.
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.
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.
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.
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:
JvectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.
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:
The basic form elements can be added to your application as below:
We are using Jquery validation for creating simple clientside form validation.
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.
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.
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:
We are using Bootstrap Select for creating select.
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.
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.
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.
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 Bootstrap DatePicker for creating datepicker.
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.
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.
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.
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:
We are using Bootstrap Markdown for creating editor.
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.
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.
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:
We are using Dropzone for creating file upload.
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.
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:
We are using Material Design Icons for creating google icon.
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.
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.
To use Simple Line Icons in your application, include the following files in <head>.
To generate an icon, add the following code:
We have used the following plugins in letstart admin
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.