Documentation

Introduction

This theme is built on Bootstrap - The most popular front-end component library. This theme extended bootstrap components and add custom components.

What's include

NobleUI comes with a simple and logically organized file structure for easy to understand and maintainability.

NobleUI/
├── template/
    ├── assets/
        ├── css/
        ├── fonts/
        ├── images/
        ├── js/
        ├── scss/
        ├── vendors/
    ├── demo_1/ (Light)
        ├── pages/
        ├── partials/
        ├── dashboard-one.html
    ├── demo_2/ (Dark)
        ├── pages/
        ├── partials/
        ├── dashboard-one.html
    ├── demo_3/ (Sidebar Dark)
        ├── pages/
        ├── partials/
        ├── dashboard-one.html
    ├── demo_4/ (RTL)
        ├── pages/
        ├── partials/
        ├── dashboard-one.html
    ├── demo_5/ (Horizontal menu)
        ├── pages/
        ├── partials/
        ├── dashboard-one.html
    ├── gulpfile.js
    ├── index.html
    ├── package.json                           
├── docs/

Setup Environment for customization

First you must have Node.js and npm installed in your computer.

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

We are using gulp which allows having complete automation to build flow. In case if you don't know - Gulp is a gulp is a toolkit for automating painful or time-consuming tasks in development workflow, so you can stop messing around and build something. You can read it more about it here.

Install gulp:

If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.

npm install -g gulp-cli

Verify that gulp is successfully installed, and version of installed gulp will appear.

gulp --version

After you finished with above two steps, you can run the automated tasks (as described below) to build the application.

Command	Description
`gulp serve`	Watch for file changes and compile scss files. The browser will automatically reload when the changes are made.
`gulp inject`	Inject partial files such as '_navbar.html', '_sidebar.html etc' from the partials folder to the pages.
`gulp copyVendors`	Copy necessary vendor files such as .css, .js and other vendor files from the node_modules folder to the vendors directory.

Customization

You can customize various elements including navbar, sidebar, form elements etc by simply editing Sass files in 'scss' directory or removing unnecessary components from style.scss main file.

Make sure that the gulp serve task is running in the terminal to compile scss files when you make changes. Once the changes are made, the scss file will be compiled and the changes will be reflected in the browser after an automatic browser reload.

It is important to run gulp serve command from the directory where the gulpfile.js is located.

Credits

Plugin	Link
Ace Editor	https://ace.c9.io/
Animate.css	https://daneden.github.io/animate.css/
Apex Charts	https://apexcharts.com/
Bootstrap	http://getbootstrap.com/
Bootstrap colorpicker	https://farbelous.io/bootstrap-colorpicker/
Bootstrap datepicker	https://bootstrap-datepicker.readthedocs.io/en/latest/
Bootstrap Max-length	http://mimo84.github.io/bootstrap-maxlength/
Bootstrap tag-input	https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/
C3 Charts	https://c3js.org/
Chart.js	https://www.chartjs.org/
Chartist	https://gionkunz.github.io/chartist-js/
Codemirror	https://codemirror.net/
D3.js	https://d3js.org/
Data Table	https://datatables.net/
Dropify	https://github.com/JeremyFagis/dropify/
Dropzone	https://www.dropzonejs.com/
Feather Icons	https://feathericons.com/
Flag Icons	http://flag-icon-css.lip.is/
FontAwesome	https://fontawesome.com/
Full Calendar	https://fullcalendar.io/
Input Mask	https://robinherbots.github.io/Inputmask/
Ion.RangeSlider	http://ionden.com/a/plugins/ion.rangeSlider/index.html
Jquery	https://jquery.com/
jQuery Toast Plugin	https://kamranahmed.info/toast
jQuery Validation	https://jqueryvalidation.org/
Jqvmap	https://github.com/10bestdesign/jqvmap
MDI Icons	https://materialdesignicons.com/
Moment js	https://momentjs.com/
Morris.js	http://morrisjs.github.io/morris.js/
NoUI Slider	https://refreshless.com/nouislider/
Peity chart	https://benpickles.github.io/peity/
Popper Js	https://popper.js.org/
Rapheal	http://dmitrybaranovskiy.github.io/raphael/
Select 2	https://select2.org/
Simple Line Icons	https://github.com/thesabbir/simple-line-icons
Simple MDE	https://simplemde.com/
Smart Wizard	http://techlaboratory.net/smartwizard
Summernote	https://summernote.org/
Themify	https://themify.me/themify-icons
TinyMCE	https://www.tiny.cloud/

Support

We are here to assist you, thank you for report any bug/issue to our email nobleui123@gmail.com.