1. Overview To Top

---

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

---

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 bodytag:

• 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.

10. Changes Log To Top

---

11. Upgrade To Top

---

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.