# Concept

- Welcome
- Main File Structure
- HTML Structure
- Plugins stractures
- Sources & Credits
- Support

Copyright © 2018 Colorlib

# Concept - Concept Admin Template

Created: 04/11/2018
Latest Update: 04/11/2018
By: Colorlib
Thank you for using our template. If you have any question, please feel free to contact us here.

# Main File Structure

All the file are well organized, its so easy to work with.
1. Unzip the files.
2. Open "Concept" folder.
You will find the html markup file on the root that will be edited.
Also you will see 4 directories, css, js, fonts and images.
In the first folder Content only styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.

                                            Concept

                                                    css

    														chosen

    																bootstrap-chosen.css

    														code-editor

    																ambiance.css
    																codemirror.css

    														colorpicker

    																colorpicker.css

    														cropper

    																cropper.min.css

    														datapicker

    																datepicker3.css

    														data-table

    																bootstrap-editable.css
    																bootstrap-table.css

    														duallistbox

    																bootstrap-duallistbox.min.css

    														form

    																all-type-forms.css
    																themesaller-forms.css

    														ionRangeSlider

    																ion.rangeSlider.css
    																ion.rangeSlider.skinFlat.css

    														jvectormap

    																jquery-jvectormap-2.0.3.css

    														preloader

    																preloader-style.css

    														select2

    																select2.min.css

    														switcher

    																color-one.css
    																color-two.css
    																color-three.css
    																color-four.css
    																color-five.css
    																color-six.css
    																color-seven.css
    																color-eight.css
    																color-nine.css
    																color-ten.css

    														touchspin

    																jquery.bootstrap-touchspin.min.css

    														tree-viewer

    																jtree-viewer.css

                                                            accordions.css
                                                            adminpro-custon-icon.css
                                                            alerts.css
                                                            animate.css
                                                            bootstrap-editable.css
                                                            buttons.css
                                                            c3.min.css
                                                            charts.css
                                                            datetimepicker.css
                                                            dropzone.css
                                                            form.css
                                                            jquery.mCustomScrollbar.min.css
                                                            Lobibox.min.css
                                                            meanmenu.min.css
                                                            modals.css
                                                            normalize.css
                                                            notifications.css
                                                            select2.css
                                                            select2-bootstrap.css
                                                            summernote.css
                                                            tab-menus.css
                                                            tabs.css
                                                            typeahead.js-bootstrap.css
                                                            x-editor-style.css
                                                            bootstrap.min.css
                                                            font-awesome.min.css
                                                            responsive.css
                                                            tree-viewer.css
                                                            main.css

    												fonts

                                                            FontAwesome.otf
                                                            fontawesome-webfont.ttf
                                                            fontawesome-webfont.woff
                                                            glyphicons-halflings-regular.woff

    												img

                                                            blog-details

    																1.jpg

                                                            contact

    																1.jpg
    																2.jpg
    																3.jpg
    																4.jpg

                                                            logo

    																logo.png

                                                            cropper

    																1.jpg

                                                            product

    																1.jpg
    																1-big.jpg
    																1-small.jpg
    																2.jpg
    																2-big.jpg
    																2-small.jpg
    																3.jpg
    																3-big.jpg
    																3-small.jpg
    																4.jpg
    																4-big.jpg
    																4-small.jpg
    																11-300x300.jpg
    																p8-375x375.jpg
    																product072-1-600x600.jpg

                                                            clear.png
                                                            favicon.ico
                                                            green1.png

                                                    pdf

                                                            mamunur.pdf

                                                    js

    														c3-charts

    																c3.min.js
    																c3-active.js
    																d3.min.js

    														charts

    																area-chart.js
    																bar-chart.js
    																Chart.js
    																line-chart.js
    																rounded-chart.js

    														chat-active

    																jquery.chat.js

    														chosen

    																chosen.jquery.js
    																chosen-active.js

    														code-editor

    																code-editor.js
    																code-editor-active.js
    																codemirror.js

    														colorpicker

    																color-picker-active.js
    																jquery.spectrum.min.js

    														counterup

    																counterup-active.js
    																jquery.counterup.min.js
    																waypoints.min.js

    														cropper

    																cropper.min.js
    																cropper-actice.js

    														data-map

    																bootstrap3-typeahead.min.js
    																d3.min.js
    																datamaps.all.min.js
    																data-maps-active.js
    																topojson.js

    														datapicker

    																bootstrap-datepicker.js
    																datepicker-active.js

    														data-table

    																bootstrap-editable.js
    																bootstrap-table.js
    																bootstrap-table-cookie.js
    																bootstrap-table-editable.js
    																bootstrap-table-export.js
    																bootstrap-table-key-events.js
    																bootstrap-table-resizable.js
    																colResizable-1.5.source.js
    																data-table-active.js
    																tableExport.js

    														duallistbox

    																duallistbox.active.js
    																jquery.bootstrap-duallistbox.js

    														flot

    																Chart.min.js
    																dashtwo-flot-active.js
    																flot-active.js
    																jquery.flot.js
    																jquery.flot.pie.js
    																jquery.flot.resize.js
    																jquery.flot.spline.js
    																jquery.flot.symbol.js
    																jquery.flot.time.js
    																jquery.flot.tooltip.min.js
    																widget-flot-chart-active.js

    														google.maps

    																google.maps-active.js

    														icheck

    																icheck.min.js
    																icheck-active.js

    														input-mask

    																jasny-bootstrap.min.js

    														ionRangeSlider

    																ion.rangeSlider.active.js
    																ion.rangeSlider.min.js

    														jvectormap

    																jquery-jvectormap-2.0.2.min.js
    																jquery-jvectormap-world-mill-en.js
    																jvectormap-active.js

    														knob

    																jquery.knob.js
    																knob-active.js

    														map

    																france_departments.js
    																jquery.mapael.js
    																map-active.js
    																raphael.min.js
    																usa_states.js
    																world_countries.js

    														multiple-email

    																multiple-email-active.js

    														password-meter

    																password-meter-active.js
    																pwstrength-bootstrap.min.js
    																zxcvbn.js

    														pdf

    																jquery.media.js
    																pdf-active.js

    														peity

    																jquery.peity.min.js
    																peity-active.js

    														rangle-slider

    																jquery-ui-1.10.4.custom.min.js
    																jquery-ui-touch-punch.min.js
    																rangle-active.js

    														rounded-counter

    																jquery.appear.js
    																jquery.countdown.min.js
    																jquery.knob.js
    																knob-active.js

    														select2

    																select2.full.min.js
    																select2-active.js

    														skycons

    																skycons.active.js
    																skycons.min.js

    														skycons

    																sparkline-active.js
    																jquery.sparkline.min.js

    														switcher

    																styleswitch.js
    																switch-active.js

    														todo

    																jquery.todo.js

    														touchspin

    																jquery.bootstrap-touchspin.min.js
    																touchspin-active.js

    														tree-line

    																jstree.active.js
    																jstree.min.js

    														vendor

    																jquery-1.11.3.min.js
    																modernizr-2.8.3.min.js

    														wow

    																wow.min.js

                                                            bootstrap.min.js
                                                            jquery-ui.min.js
                                                            jquery.meanmenu.js
                                                            jquery-1.11.3.min.js
                                                            modernizr-2.8.3.min.js
                                                            jquery.mCustomScrollbar.concat.min.js
                                                            bootstrap.min.js
                                                            bootstrap-datetimepicker.js
                                                            bootstrap-editable.js
                                                            datepicker-active.js
                                                            dropzone.js
                                                            form-active.js
                                                            jquery.form.min.js
                                                            jquery.maskedinput.min.js
                                                            jquery.mCustomScrollbar.concat.min.js
                                                            jquery.meanmenu.js
                                                            jquery.mockjax.js
                                                            jquery.scrollUp.min.js
                                                            jquery.sticky.js
                                                            jquery.validate.min.js
                                                            jquery-ui.min.js
                                                            Lobibox.js
                                                            main.js
                                                            masking-active.js
                                                            mock-active.js
                                                            modal-active.js
                                                            moment.min.js
                                                            notification-active.js
                                                            select2.js
                                                            summernote.min.js
                                                            summernote-active.js
                                                            typeahead.js
                                                            typeaheadjs.js
                                                            xediable-active.js

                                                     index.html
                                                     index-1.html
                                                     index-2.html
                                                     add-course.html
                                                     add-department.html
                                                     add-library-assets.html
                                                     add-professor.html
                                                     add-student.html
                                                     all-courses.html
                                                     all-professors.html
                                                     all-students.html
                                                     course-info.html
                                                     departments.html
                                                     edit-course.html
                                                     edit-department.html
                                                     edit-library-assets.html
                                                     edit-professor.html
                                                     edit-student.html
                                                     events.html
                                                     library-assets.html
                                                     professor-profile.html
                                                     student-profile.html
                                                     404.html
                                                     500.html
                                                     accordion.html
                                                     advance-form-element.html
                                                     alerts.html
                                                     analytics.html
                                                     area-charts.html
                                                     bar-charts.html
                                                     basic-form-element.html
                                                     buttons.html
                                                     c3.html
                                                     code-editor.html
                                                     contacts.html
                                                     data-maps.html
                                                     data-table.html
                                                     dual-list-box.html
                                                     google-map.html
                                                     images-cropper.html
                                                     line-charts.html
                                                     lock.html
                                                     login.html
                                                     mailbox.html
                                                     mailbox-compose.html
                                                     mailbox-view.html
                                                     modals.html
                                                     multi-upload.html
                                                     notifications.html
                                                     password-meter.html
                                                     password-recovery.html
                                                     pdf-viewer.html
                                                     peity.html
                                                     preloader.html
                                                     register.html
                                                     rounded-chart.html
                                                     sparkline.html
                                                     tabs.html
                                                     tinymc.html
                                                     tree-view.html
                                                     widgets.html
                                                     x-editable.html

# HTML Structure

The base structure was organized by row, col-** class

        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="logo">
                        <a href="dashboard.html">
                            <img src="img/logo.png" alt="">
                        </a>
                    </div>
                </div><!-- column end -->
            </div> <!-- row end -->
        </div> <!-- container end -->

# Plugins

# | Plugin Name | Description
--- | --- | ---
1 | C3 And D3 | we are going to show you how to get started with C3 and read more
2 | Chart | Simple yet flexible JavaScript charting for designers & developersand read more
3 | Chosen | Chosen is a jQuery plugin that makes long and read more
4 | CodeMirror | CodeMirror is a versatile text editor implemented in JavaScript for the browser and read more
5 | Colorpicker | Satisfied with the solutions available for colorpicking and read more
6 | counterup | COUNTER-UP JQUERY PLUGIN and read more
7 | Cropper | A simple jQuery image cropping plugin and read more
8 | Data Map | HTML5 maps look gorgeous on iPhones, Android devices and iPads read more
9 | Datepicker | Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style and read more
10 | X-editable | X-editable can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes and Read More
11 | Dual Listbox | Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap and Read More
12 | plot Chart | Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features and Read More
13 | Google Maps | All of the examples contained in the Google Maps JavaScript API documentation set are listed below for quick reference and Read More
14 | iCheck | UPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO and Read More
15 | RangeSlider | Ion.RangeSlider 2.2.0. jQuery-plugin Easy, flexible and responsive range slider with skin support and Read More
16 | jvectormap | JavaScript-based jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML and Read More
17 | Knob | jQuery Knob mouse click and wheel mouse, keyboard (on focus) and fingers (touch events) and Read More
18 | Mapael | Ease the build of pretty data visualizations on dynamic vector maps and Read More
19 | Password Meter | jQuery Password Strength Meter for Twitter Bootstrap and Read More
20 | PDF Viewer | The jQuery Media Plugin supports unobtrusive conversion of standard markup into rich media content and Read More
21 | Peity Charts | Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini pie donut line or bar chart and is compatible with any browser that supports Chrome, Firefox, IE9+, Opera, Safari and Read More
22 | Skycons | Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag and Read More
23 | Sparklines | This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript and Read More
24 | TouchSpin | A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys and Read More
25 | jsTree | jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading and Read More
26 | Lobibox | Free responsive jQuery messagebox and notification plugin available for commercial and non-commercial usages and Read More
26 | WOW | Reveal Animations When You Scroll. Very Animate.css Friend :-) Easily customize animation settings: style, delay, length, offset, iterations... and Read More
27 | Data Table | An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features and Read More
28 | Custom scrollbar | Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel and Read More
29 | Summernote | Customize by Initializing various options and modules and Read More

# Tinymc Editor Structure

### Quick start

Copy-paste the stylesheet "link" into your "head" before all other stylesheets to load our CSS.

    	<!-- summernote CSS
    		============================================ -->
            <link rel="stylesheet" href="css/summernote.css">

The end of your pages, right before the closing "body" tag. Be sure to place js first, as our JavaScript plugins depend on them.

    	<!-- summernote JS
    		============================================ -->
            <script src="js/summernote.min.js"></script>
            <script src="js/summernote-active.js"></script>

        <div class="tinymce-single nt-mg-b-30">
    		<div class="alert-title">
    			<h2>Basic Summernote WYSIWYG editor</h2>
    			<p>The fastest way to get Summernote WYSIWYG editor is powerfull JavaScript plugin. you can easily maintance typography system.</p>
    		</div>
    		<div id="summernote1">
    		</div>
    	</div>

# Sources & Credits

### Fonts

- Google Fonts

### Icons

- Font Awesome

### Scripts

- Peity Charts
- Sparklines
- Scrollbar
- TouchSpin
- Data Table
- JsTree
- Skycons
- Password Meter
- PDF Viewer
- Mapael
- jvectormap
- RangeSlider
- Cropper
- Data Map
- CodeMirror
- Chosen
- C3 And D3
- datetimepicker
- x-editable
- dropzonejs
- form Validation
- form Validation
- masked input
- mockjax
- lobibox
- summernote
- editable

# Supports

Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.

Colorlib

# Sliders Structure

The base structure was organized by row, col-** class

        <!-- code will be here -->