Back to home

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.


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
image

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

image

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
Primary Primary Primary Primary Primary Primary
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 image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
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

Progress Bar
Default Tooltips
Notifications
This is a primary alert — check it out!
This is a primary alert — check it out!
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:

Context Menu

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Click Here to see the official documentation.

Usage

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

Add the following script files in <body>.

To create a context menu, 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:


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: