Theme Settings
This module "block-menu-right" gives possibility to construct custom blocks with any widgets, components and elements inside, like this theme settings
Theme Style
Dark
Light
Green
Blue
Red
Orange
Boxed Layout
On
Off
Compact Menu
On
Off
Fixed Top Bar
On
Off
Super Clean Mode
On
Off
Colorful Menu
On
Off
Menu Shadow
On
Off
Squared Corners
On
Off
Issues History

Current search Search for issues
Opened
CLNUI-253 Project implemen... CLNUI-234 Active history iss... CLNUI-424 Ionicons intergrat... More...
Filters
My open issues Reported by me
Import issues from CSV
Settings

Dashboards

Active
Project Management User Inetrface Development Documentation
Inactive
Marketing
Settings

Buy Now 20 25$
Server Load:
20%

now Update Status: New
Failed to get available update data. To ensure the proper functioning of your application, update now.
24 min ago Income: $299.00
Failed to get available update data. To ensure the proper functioning of your application, update now.
30 min ago Inbox Message
From: David Bowie
now Update Status: New
Failed to get available update data. To ensure the proper functioning of your application, update now.
24 min ago Income: $299.00
Failed to get available update data. To ensure the proper functioning of your application, update now.
30 min ago Inbox Message
From: David Bowie

Profile
Home
System Dashboard User Boards Issue Navigator (35 New)
Logout

Clean UI Admin Template Documentation Version 2.1.1

#### Table of Contents

1. 1. Overview
2. 2. File Structure
3. 3. HTML version
4. 4. Angular version
5. 5. Template Structure
6. 6. Template Configuration
7. 7. Font
8. 8. Modules
9. 1. 8.1. Core Module
   2. 8.2. Layouts Module
   3. 8.3. Top-bar Module
   4. 8.4. Menu-left Module
   5. 8.5. Menu-right Module
   6. 8.6. Footer Module
   7. 8.7. Themes Module
   8. 8.8. Vendors Module
   9. 8.9. Pages Module
   10. 8.10. Apps Module
   11. 8.11. Ecommerce Module
10. 9. Plugins
11. 10. Change Log
12. 11. Upgrade
13. 12. End of Documentation

#### 1. Overview To Top

Rating is a very important both for us (it motivates to develop new modules), and for future customers. So we request you to rate our Templates with 5 Stars on Themeforest.
You can do it in Themeforest Download section. Thank you!

Clean UI is the first framework in the world, which uses the concept of modularity. The use of such approach allows you to drastically reduce the time and cost of development. Build the interface from the ready blocks and modules quickly and easily, like Lego! And all this is available now for Angular (version 4 or higher).

This is a completely modular framework, built on the latest technologies, such as BEM methodology (Block Element Modifier). You can learn more about the methodology here. Following the simple and understandable rules of this methodology allows the easy support of code even after long-term development. Adding new functionality and modifying the old one has never been so easy before. The presence of a variety of useful development methodologies make this process easier and more enjoyable; for example, such feature as rem measurement units make mobile versions of applications, built on the basis of Clean UI, look great on any type of devices. Open our template on your mobile phone and be sure to verify it yourself!

Clean UI - a modern professional admin template, based on Bootstrap 4 framework. It's a powerful and super flexible tool, which suits best for any kind of web application: Web Applications; CRM; CMS; Admin Panels; Dashboards; etc. Clean UI is fully responsive, which means that it looks perfect on mobiles and tablets.

Our template is fully based on SASS pre-processor, includes 50+ commented SASS files. Each file corresponds to a single component, layout, page, plugin or extension – so you can easily find necessary piece of code and edit it for your needs. The package includes CSS files compiled from SASS.

NOTE: A single license can be used only for one domain or client. Each use of the theme requires a separate license. We hope you will follow the rules as it will help us to continue supporting our themes and providing a free future updates. Also, don't forget read about Extended License.

Purchase A New License License Info

NOTE: A single purchase includes 6 months support subscription and after this period expired in order to continue getting the theme support from us you will need to extend it by purchasing a new support subscription. For more info please check Envato support rules or support policy.

Extend Support

#### 2. File Structure To Top

Almost every source file of the template contains the necessary minimum comments to the code. Please be sure to read them to understand the work of this code.

    +
    +
    ├─ cleanui-admin-template-angular/  .. angular version
    │  ├─ e2e/                          .. system angular files
    │  ├─ dist/                         .. build app files after "ng build --prod --aot" run
    │  ├─ node_modules/                 .. node.js modules installed after "npm install" run
    │  ├─ src/                          .. app source files
    │  │  ├─ app/                       .. app files (includes templates manually copied and adapted from clean ui)
    │  │  ├─ assets/                    .. assets folder (includes files manually copied and adapted from clean ui)
    │  │  ├─ environments/              .. system angular files
    │  │  ├─ index.html                 .. main app template
    │  │  ├─ main.ts                    .. main app script
    │  │  └─ *                          .. system angular files
    │  ├─ *                             .. system angular files
    │  └─ README.md                     .. git readme file
    +
    +
    ├─ cleanui-admin-template/          .. html version
    │  ├─ dist/                         .. build app files by gulp after "gulp" run
    │  │  ├─ modules/                   .. cleanui modules files
    │  │  ├─ vendors/                   .. vendors files
    │  │  └─ versions/                  .. cleanui versions files (layout variations)
    │  ├─ node_modules/                 .. node.js modules installed after "npm install" run
    │  ├─ src/                          .. source files
    │  │  ├─ modules/                   .. cleanui modules files
    │  │  ├─ templates/                 .. cleanui template files (layout variations)
    │  │  │  ├─ structure/              .. template structure
    │  │  │  └─ versions/               .. cleanui versions templates (layout variations)
    │  │  └─ vendors/                   .. vendors files installed by bower after "bower install" run
    │  ├─ *                             .. system npm, gulp, and git files
    │  └─ README.md                     .. git readme file
    +
    +
    └─ documentation.html               .. link to template documentation

#### 3. HTML Version To Top

Note: For use `px`'s instead `rem`'s in CSS, change calculation formula in rem function (/src/modules/core/css/mixins.scss) and recompile SASS by `gulp build:css` task.

Use the ready (pre-compiled) templates of different versions from the folder `/dist/versions/`

or

Use Gulp for build source files:

1. Install latest Node.js from here https://nodejs.org;
2. Install Bower `npm install --global bower gulp`;
3. Install Node modules `npm install`;
4. Install project dependencies `bower install`;
5. Run gulp `gulp` (builds to /dist/);
6. If a browser did not open automatically, please open http://localhost:9000 in any browser.

Gulp tasks:

1. `gulp` default task, includes ['build', 'watch', 'serve'] tasks;
2. `gulp build` includes ['build:version', 'build:js', 'build:css', 'build:img', 'build:vendors'];
3. `gulp serve` project serve;
4. `gulp build:versions` build pages and structure (html);
5. `gulp build:js` build js scripts;
6. `gulp build:css` compilation and build sass files (css);
7. `gulp build:img` build images;
8. `gulp build:vendors` copy and merge vendros plugins to dist folder.

#### 4. Angular Version To Top

Angular (version 4 and higher) of Clean UI Admin Template. Application routing + Ng-Bootstrap directives. Use of this version is optional.

Installation:

1. Install latest Node.js from here https://nodejs.org;
2. Install Angualr CLI `npm install -g angular/cli`;
3. Install Node modules `npm install`;
4. Install project dependencies `bower install`;
5. Run Angular `ng serve`;
6. Build Angular production files `ng build --prod --aot` (builds to /dist/);
7. Open in any browser http://localhost:4200

#### 5. Template Structure To Top

The original display of template consists of the following blocks:

1. Top-bar - block, based on the "Top-bar Module";
2. Left Sidebar - block, based on the "Menu-left Module";
3. Content - content block;
4. Right Sidebar - block, based on the "Menu-right Module";
5. Footer - block, based on the "Footer Module".

2. | 1. | 4.
3.
5.

Code structure:

- Each class has the "cat__" prefix (abbreviation of Cleanui Admin Template); this makes any class unique, which allows to easily add modifiers, as well as get rid of unwanted styles inheritance;
- Please see the section "Template configuration" for the information on the possible classes of body tag;
- The template can contain any set of modules and in any order.

    <html>
    <head>
        <!-- meta, scripts, and styles includes here -->
    </head>
    <body class="">
        <div class="cat__menu-right">
            <!-- "menu-right module" template -->
        </div>
        <div class="cat__menu-left">
            <!-- "menu-left module" template -->
        </div>
        <div class="cat__top-bar">
            <!-- "top-bar module" template -->
        </div>
        <div class="cat__content">
            <!-- current page content -->
            <!-- current page scripts -->

            <div class="cat__footer">
                <!-- "footer module" template -->
            </div>
        </div>
    </body>
    </html>

#### 6. Template Configuration To Top

The template has a set of global settings, which are activated by adding certain classes to the `body`tag:

- These settings may affect the modules connected to the template. Information on any impact of a particular global setting on the module is located in the description of this module;
- These settings can be used for any of the modules and modify them regardless of the names of these settings.

Settings:

Class | Applies to | By default used for
--- | --- | ---
`.cat__config--vertical` | `body` | The vertical layout type. Mandatory class, can be replaceed by `.cat__config--horizontal`
`.cat__config--horizontal` | `body` | The horizontal layout type. Mandatory class, can be replaceed by `.cat__config--vertical`
`.cat__config--boxed` | `body` | Fixed width content block
`.cat__config--compact` | `body` | Compact layout type
`.cat__config--unfixed` | `body` | Layout type with unfixed blocks
`.cat__config--superclean` | `body` | Clean styles layout type
`.cat__config--squared-corners` | `body` | Squared corners
`.cat__config--shadow` | `body` | Drop shadows

Example of use (will configure the compact horizontal menu on top with the fixed width of content-area):

    <body class="cat__config--horizontal cat__config--boxed cat__config--compact">

#### 7. Font To Top

This template uses font PT Sans, loaded from. Google Fonts. This font has to be loaded into `head`.

    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&amp;subset=cyrillic" rel="stylesheet">

#### 6. Modules To Top

##### 8.1. Core Module

Description:

- The main module of Clean UI Admin Template. Contains a set of styles for the basic components of Clean UI Admin Template, for example, such as links, font size, background colour, margins from the main content-block and other additional components of the interface (widgets).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/core/common/core.cleanui.css">

The impact of global settings on this module:

Class | Applies to | Used for
--- | --- | ---
`.cat__config--superclean` | `body` | Changes the size of margins of content area (remove paddings, borders, etc)
`.cat__config--squared-corners` | `body` | Squared corners of card component of bootstrap framework

##### 8.2. Layouts Module

Deascription:

- The set of styles, transforming "Core Module", "Menu-left Module", "Top-bar Module" into a vertical or horizontal display mode, depending on the template configuration.

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/layouts/common/layouts.cleanui.css">

The impact of global settings on this module:

Class | Applies to | Used for
--- | --- | ---
`.cat__config--horizontal` | `body` | Activates horizontal configuration for "Core Module", "Menu-left Module", "Top-bar Module"
`.cat__config--boxed` | `body` | Activates fixed width configuration for "Core Module", "Menu-left Module", "Top-bar Module"
`.cat__config--compact` | `body` | Activates compact layout type for "Core Module", "Menu-left Module"
`.cat__config--unfixed` | `body` | Activates unfixed blocks layout type for "Core Module", "Menu-left Module", "Menu-left Module"

##### 8.3. Top-bar Module

Description:

- Top bar (header).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/top-bar/common/top-bar.cleanui.css">

Can affect on:

Module | Used for
--- | ---
Core Module | Changes the size of margins of content area (create space for module block)

Template:

    <div class="cat__top-bar">

        <!-- START: top-bar left side -->
        <div class="cat__top-bar__left">

            <!-- START: top-bar logo -->
            <div class="cat__top-bar__logo">
                ... image link logo
            </div>
            <!-- END: top-bar logo -->

            <!-- START: top-bar item -->
            <div class="cat__top-bar__item">
                ... any content
            </div>
            <!-- END: top-bar item -->

        </div>
        <!-- END: top-bar left side -->

        <!-- START: top-bar right side -->
        <div class="cat__top-bar__right">

            <!-- START: top-bar item  -->
            <div class="cat__top-bar__item">
                ... any content
            </div>
            <!-- END: top-bar item -->
        </div>
        <!-- END: top-bar right side -->

    </div>

##### 8.4. Menu-left Module

Description:

- Left menu (main).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/menu-left/common/menu-left.cleanui.css">
    <script src="../../modules/menu-left/common/menu-left.cleanui.js"></script>

Can affect on:

Module | Used for
--- | ---
Core Module | Changes the size of margins of content area (create space for module block)

Settings:

Class | Applies to | Used for
--- | --- | ---
`.cat__menu-left--visible` | `body` | Hide / show module block
`.cat__menu-left--colorful` | `body` | Activates the automatic addition of random classes (when loading page) to menu items to display a colored line
`.cat__menu-left__item--active` | `.cat__menu-left__item` | Active menu item
`.cat__menu-left__submenu--toggled` | `.cat__menu-left__submenu` | Expands the cascading menu
`.cat__menu-left--colorful--primary`, `.cat__menu-left--colorful--secondary`, `.cat__menu-left--colorful--primary`, `.cat__menu-left--colorful--default`, `.cat__menu-left--colorful--info`, `.cat__menu-left--colorful--success`, `.cat__menu-left--colorful--warning`, `.cat__menu-left--colorful--danger`, `.cat__menu-left--colorful--yellow` | `.cat__menu-left__item` | Adds a colored line (depending on the class) to the menu item

The impact of global settings on this module:

Class | Allplies to | Used for
--- | --- | ---
`.cat__config--vertical` | `body` | Activates custom scroll
`.cat__config--shadow` | `body` | Adds shadow

Actions:

Class | Applies to | Used for
--- | --- | ---
`.cat__menu-left__action--menu-toggle` | `*` (any element on the page) | Toggles menu module block

Template:

    <div class="cat__menu-left">

        <!-- START: menu-left icon -->
        <div class="cat__menu-left__lock cat__menu-left__action--menu-toggle">
            <div class="cat__menu-left__pin-button">
                <div><!-- --></div>
            </div>
        </div>
        <!-- END: menu-left icon -->

        <!-- START: menu-left logo -->
        <div class="cat__menu-left__logo">
            ... image link logo
        </div>
        <!-- END: menu-left logo -->

        <!-- START: menu-left root list -->
        <ul class="cat__menu-left__list cat__menu-left__list--root">

            <!-- START: menu-left item -->
            <li class="cat__menu-left__item">
                <a>
                    <span class="cat__menu-left__icon *icon-class"></span>
                    ... link title
                </a>
            </li>
            <!-- END: menu-left item -->

            <!-- START: menu-left item divider-->
            <li class="cat__menu-left__divider"><!-- --></li>
            <!-- END: menu-left item divider -->

            <!-- START: menu-left item with submenu -->
            <li class="cat__menu-left__item cat__menu-left__submenu">
                <a>
                    <span class="cat__menu-left__icon *icon-class"></span>
                    ... link title
                </a>
                <ul class="cat__menu-left__list">
                    <li class="cat__menu-left__item">
                        <a href="pages-login-alpha.html">
                            <span class="cat__menu-left__icon">AA</span>
                            ... link title
                        </a>

                        <!-- START: menu-left item with submenu -->
                        ... next level submenu item
                        <!-- END: menu-left item with submenu -->
                    </li>
                </ul>
            </li>
            <!-- END: menu-left item with submenu -->

        <ul>
        <!-- END: menu-left root list -->

    </div>

##### 8.5. Menu-right Module

Description:

- Right menu.

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/menu-right/common/menu-right.cleanui.css">
    <script src="../../modules/menu-right/common/menu-right.cleanui.js"></script>

Settings:

Class | Applies to | Used for
--- | --- | ---
`.cat__menu-right--visible` | `body` | Hide / show module block

Actions:

Class | Applies to | Used for
--- | --- | ---
`.cat__menu-right__action--menu-toggle` | `*` (any element on the page) | Toggles menu module block

Template:

    <div class="cat__menu-right">

        <!-- START: menu-right header -->
        <div class="cat__menu-right__header">
            <span class="fa fa-times pull-right cat__menu-right__action--menu-toggle"><!-- --></span>
            ... header title
        </div>
        <!-- END: menu-right header -->

        <!-- START: menu-right content -->
        <div class="cat__menu-right__content">
            ... any content
        </div>
        <!-- END: menu-right content -->

    </div>

##### 8.6. Footer Module

Description:

- Bottom bar (footer).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/footer/common/footer.cleanui.css">

The impact of global settings on this module:

Class | Applies to | Used for
--- | --- | ---
`.cat__config--squared-corners` | `body` | Squared corners

Template:

    <div class="cat__footer">

        <!-- START: footer top -->
        <div class="cat__footer__top">
            ... any content
        </div>
        <!-- END: footer top -->

        <!-- START: footer bottom -->
        <div class="cat__footer__bottom">
            ... any content
        </div>
        <!-- END: footer bottom -->

    </div>

##### 8.7. Themes Module

Description:

- A set of styles for additional themes (Light Theme, Green Theme, Blue Theme, Red Theme, Orange Theme).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/themes/common/themes.cleanui.css">

Can affect on:

Module | Used for
--- | ---
Left-menu Module | Changes color of the elements
Top-bar Module | Changes color of the elements

Settings:

Class | Applies to | Theme name
--- | --- | ---
`.cat__theme--light` | `body` | Light Theme
`.cat__theme--green` | `body` | Green Theme
`.cat__theme--blue` | `body` | Blue Theme
`.cat__theme--red` | `body` | Red Theme
`.cat__theme--orange` | `body` | Orange Theme

##### 8.8. Vendors Module

Description:

- A set of styles for Bootstrap 4 and for third-party plug-ins (bootstrap, perfect-scrollbar, bootstrap-select, select2, chartist, chartist-tooltip-plugin, chartjs, datatables, datatables-responsive, datatables-fixedcolumns, dropify, editable-table, eonasdan-bootstrap-datetimepicker, fullcalendar, ionrangeslider, jquery-steps, nestable, nprogress, select2, summernote, html5-form-validation, jquery-typeahead, owl-carousel, bootstrap-sweetalert).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/vendors/common/vendors.cleanui.css">

##### 8.9. Pages Module

Description:

- Set of styles for additional pages (login-alpha, login-beta, invoice, lockscreen, page-404, page-500, pricing-tables, register).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/pages/common/pages.cleanui.css">

##### 8.10. Apps Module

Description:

- Set of styles for additional pages (profile, messaging, mail, calendar, gallery).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/apps/common/apps.cleanui.css">

##### 8.11. Ecommerce Module

Description:

- Set of styles for additional pages (cart-checkout, dashboard, orders, product-details, product-edit, products-catalog, products-list).

Installation:

    <link rel="stylesheet" type="text/css" href="../../modules/ecommerce/common/ecommerce.cleanui.css">

#### 9. Plugins To Top

Please read the Official Documentation to plug-ins that are used on the pages of the template. This will eliminate many issues, related to the work of these plug-ins.

You may find links on top of each block in the template pages ("Official Documentation " button) or in the list below.

Name | Description | URL
--- | --- | ---
jquery | Core Javascript library | http://www.jquery.com
angular | Angular is a development platform for building mobile and desktop web applications | https://angular.io
jquery | Sleek, intuitive, and powerful front-end framework for faster and easier web development |
tether | Tether is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page | http://tether.io/
jquery-mousewheel | A jQuery plugin that adds cross-browser mouse wheel support with delta normalization | https://github.com/jquery/jquery-mousewheel
ladda | Buttons with built-in loading indicators, effectively bridging the gap between action and feedback | http://lab.hakim.se/ladda/
bootstrap-select | Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements | https://silviomoreto.github.io/bootstrap-select/
select2 | Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options | https://select2.github.io/
html5-form-validation | The jQuery form validation plugin unifies the way to validate HTML forms using JavaScript | https://github.com/running-coder/jquery-form-validation
jquery-typeahead | The jQuery Typeahead plugin provides autocomplete preview on search inputs similar to google search with builtin options and deep customization | https://github.com/running-coder/jquery-typeahead
jquery-mask-plugin | A jQuery Plugin to make masks on form fields and html elements | https://igorescobar.github.io/jQuery-Mask-Plugin/
autosize | A small, stand-alone script to automatically adjust textarea height | http://www.jacklmoore.com/autosize/
bootstrap-show-password | Show/hide password plugin for twitter bootstrap | https://github.com/wenzhixin/bootstrap-show-password
eonasdan-bootstrap-datetimepicker | Date/time picker widget based on twitter bootstrap | https://github.com/Eonasdan/bootstrap-datetimepicker
fullcalendar | A JavaScript event calendar. Customizable and open source. | https://fullcalendar.io/
bootstrap-sweetalert | A beautiful replacement for JavaScript's "alert" | https://lipis.github.io/bootstrap-sweetalert/
remarkable-bootstrap-notify | This plugin helps to turn standard bootstrap alerts into "growl" like notifications | http://bootstrap-notify.remabledesigns.com/
summernote | Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online | http://summernote.org/
owl.carousel | Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider | http://owlcarousel2.github.io/OwlCarousel2/
ionrangeslider | Easy, flexible and responsive range slider with skin support | http://ionden.com/a/plugins/ion.rangeslider/
nestable | Drag & drop hierarchical list with mouse and touch compatibility | https://dbushell.com/Nestable/
datatables | Table plug-in for jQuery | https://datatables.net/
datatables-responsive | Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table | https://datatables.net/extensions/responsive/
datatables-fixedcolumns | When making use of DataTables x-axis scrolling feature, you may wish to fix the left or right most columns in place |
chartist | Simple responsive charts | https://gionkunz.github.io/chartist-js/
chartist-plugin-tooltip | This plugin provides quick and easy tooltips for your chartist charts | https://github.com/Globegitter/chartist-plugin-tooltip
c3 | D3-based reusable chart library | http://c3js.org/
d3 | Data-Driven Documents | https://d3js.org/
peity | Peity (sounds like deity) is a jQuery plugin that converts an element's content into a svg mini pie, donut, line or bar chart | http://benpickles.github.io/peity/
gsap | The new standard for HTML5 and javascript animation | https://greensock.com/gsap
jquery-countTo | jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element | https://github.com/mhuggins/jquery-countTo
nprogress | A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening! | http://ricostacruz.com/nprogress/
jquery-steps | An all-in-one wizard plugin that is extremely flexible, compact and feature-rich | http://www.jquery-steps.com/
chart.js | Simple yet flexible JavaScript charting for designers & developers | http://www.chartjs.org/
dropify | Override your input files with style | https://github.com/JeremyFagis/dropify
clean-media-player | Audi / Video Html Players | http://cleanhtmlplayer.com/
editable-table | This tiny (3KB, < 120 lines) jQuery plugin turns any table into an editable spreadsheet | https://github.com/mindmup/editable-table
font-awesome | The iconic font and CSS toolkit | http://fontawesome.io/
font-icomoon | General purpose icons. Gets the job done | https://icomoon.io/#icons-icomoon
font-lineraicons | Ultra Crisp Line Icons with Integrity | https://linearicons.com/
jquery-ui | jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library | https://jqueryui.com/

#### 10. Changes Log To Top

Version 2.1.1

Html Version:

Major:

1. Upgrade to Boostrap 4.0.0-beta.2

Minor:

1. Dependencies was updated;
2. Custom Radio & Checkboxes.

Angular Version:

Major:

1. Dependencies was updated;
2. CLI errors was fixed;

Version 2.1.0

Html Version:

Major:

1. New modules structure: now it have sub-folders with parts of module and folder for Visual Builder config;
2. New "Dummy Assets Module". All dummy files (img, json data. etc) moved to this module.

Minor:

1. Gulpfile refactoring (improved performance);
2. Datatables plugin fixed by our team and moved to "vendors/by_hands", since bug with bootstrap 4.alpha6. Will fixed in next Datatables release. Link (read comments);
3. jspScrollpane fix. "Menu Left Module" scroll didn't work on touch PC and Laptops displays;
4. Minor UI changes.

Angular Version:

Major:

1. Updated to Angular 4.x
2. NgBootstrap directives fixes (compatibility with Angular 4.x);
3. Refactoring components structure for improvement performance in development mode.

#### 11. Upgrade To Top

Version 2.1.0 → Version 2.1.1

1. Replace modules and change assets paths to css and js files;
2. Replace all "card-block" to "card-body" classes (Bootstrap Alpha -> Bootstrap Beta requirement);
3. Thether.js -> Popper.js (Bootstrap Beta requirement);

Version 2.0.0 → Version 2.1.0

1. Replace modules and change assets paths to css and js files;
2. Change dummy images paths to "Dummy Assets Module".

#### 12. End of Documentation To Top

Thank you once again for purchasing Clean UI Admin Template. We hope that you will use it in your project with delight.

Check Out Preselected Demos

- Vertical Menu (Default)
- Ecommerce Version
- Horizontal Menu + Boxed Container
- Iconbar Vertical Menu
- Inverse Color Scheme

- Super Clean Mode + Menu Shadow
- Horizontal Menu
- Compact Horizontal Menu
- Vertical Menu + Boxed
- Horizontal Menu + Boxed

Check Out Preselected Demos

Clean UI – a modern professional admin template, based on Bootstrap 4 framework. Clean UI is a powerful and super flexible tool, which suits best for any kind of web application: Web Applications; CRM; CMS; Admin Panels; Dashboards; etc. Clean UI is fully responsive, which means that it looks perfect on mobiles and tablets

Clean UI is fully based on SASS pre-processor, includes 50+ commented SASS files. Each file corresponds to a single component, layout, page, plugin or extension – so you can easily find necessary piece of code and edit it for your needs. The package includes both normal and minified CSS files, compiled from SASS

Buy Now 20 25$
© 2016 Mediatec Software
All rights reserved