Version 1.7.0 Clean UI Documentation

Thanks for Purchasing Clean UI. Clean UI is a simple, clean, and responsive admin template based on Boostrap 4. Built with HTML, CSS (SASS), jQuery and Angular (optional)
If you really like Clean UI, please don’t forget rate it ! It will help us for future updates. Thank you!

Introduction

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: SPA; CRM; CMS; Admin Panels; Dashboards; etc. Fully responsive, which means that it looks perfect on mobiles and tablets.

Template includes Angular Starter Kit – a set of templates, that will make your developer's life much easier.

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.


Package

  • Folder "cleanui-admin-template" — Clean UI Admin Template;
  • Folder "website-website-template" — Clean UI Website Template (Freebie Landing Pages).

Install Node.js, Bower, Gulp

Use of these tools is completely optional.

Gulp is the build system used to build and preview your project. Bower is a package manager is used for dependency management, so that you no longer have to manually download and manage your scripts.

  • Node.js and NPM. You can download Node.js from here https://nodejs.org. Npm comes bundled with Node.js
  • Next you need to install bower and gulp using terminal command npm install --global bower gulp
  • Finally run npm install and bower install from the root of your project to install all the necessary dependencies

Once you have all tools and dependencies installed you can use this command in your project:

  • gulp launches a localhost preview of your app (with Livereload) and will compile either your SASS files to CSS, and create production files

Options

Title Instruction
Material Design Mode Optional classes applied to body : .mode-material
Color Schemes Optional classes applied to body : .theme-default, .theme-dark, .theme-green, .theme-blue, .theme-red, .theme-orange
Main Menu Position (Vertical or Horizontal) Optional classes applied to body : .menu-left, .menu-top
Compact Horizontal Menu Optional classes applied to body : .menu-top-compact works only with .menu-top
Boxed Version (applied to Vertical or Horizontal Main Menu) Optional classes applied to body : .layout-boxed
Boxed Version w/ Container (applied to Horizontal Main Menu) Wrap nav.left-menu, nav.top-menu, .page-content in .boxed-container
Iconbar Main Menu (applied to Vertical Main Menu) Optional classes applied to body : .menu-iconbar
Fixed Top Menu Optional classes applied to body : .menu-fixed
Super Clean Mode Optional classes applied to body : .mode-superclean
Menu Shadow Optional classes applied to body : .mode-box-shadow
Squared Corners Optional classes applied to body : .mode-squared
Inversed Colors (Dark Content Container) Optional classes applied to body : .theme-inverse
Colorful Menu Optional classes applied to nav.left-menu .left-menu-list-root > li : .left-menu-list-color-primary, .left-menu-list-color-secondary, .left-menu-list-color-default, .left-menu-list-color-info, .left-menu-list-color-success, .left-menu-list-color-warning, .left-menu-list-color-danger, .left-menu-list-color-yellow

Structure

cleanui/                            // root folder
+
+
├─build/                            // folder with builded (ready to use) files
│  ├─ assets/                       // assets folder
│  │  ├─ common/                    // cleanui related files
│  │  │  ├─ css/                    // styles folder
│  │  │  │  ├─ source/              // source styles
│  │  │  │  │  ├─ */                // folders with components, forms, global, etc css styles
│  │  │  │  │  └─ main.css          // css file that includes all other css files
│  │  │  │  └─ main.min.css         // minified and compiled css files
│  │  │  ├─ fonts/                  // fonts and icon fonts folder
│  │  │  ├─ img/                    // images folder
│  │  │  └─ js/                     // js folder
│  │  │     └─ common.js            // cleanui related js file
│  │  └─ vendors/                   // third party plugins, copied by bower from /src/assets/vendors folder
│  ├─ version_angular/              // angular version
│  │  ├─ */                         // folders with page templates for angular
│  │  └─ index.html                 ██ index angular file, runs only in web-server environment or get CORS error
│  └─ version_html/                 // html version
│     ├─ *                          // html pages
│     └─ index.html                 ██ index html file
+
+
├─src/                              // source files
│  ├─ assets/                       // assets folder
│  │  ├─ common/                    // cleanui related files
│  │  │  ├─ css/                    // styles folder
│  │  │  │  ├─ source/              // source styles
│  │  │  │  │  ├─ */                // folders with components, forms, global, etc scss styles
│  │  │  │  │  ├─ main.scss         // sass file that includes all other css files
│  │  │  │  │  └─ mixins.scss       // sass with mixins and variables
│  │  │  ├─ fonts/                  // fonts and icon fonts folder
│  │  │  ├─ img/                    // images folder
│  │  │  └─ js/                     // js folder
│  │  │     └─ common.js            // cleanui related js file
│  │  └─ vendors/                   // third party plugins
│  │     ├─ bower/                  // bower added plugins, copied by bower to /build/assets/vendors folder
│  │     └─ manual/                 // hand managed plugins, copied by bower to /build/assets/vendors folder
│  ├─ templates/                    // cleanui page templates
│  │  └─ */                         // cleanui page templates, grouped by type
│  ├─ version_angular/              // cleanui page templates (structure folder)
│  │  ├─ */                         // angular version files that includes cleanui templates
│  │  ├─ _*                         // angular version related blocks
│  │  └─ index.html                 // index angular file
│  └─ version_html/                 // cleanui page templates (structure folder)
│     ├─ _*                         // html version related blocks
│     └─ *                          // html version files that includes cleanui templates
+
+
├─ .bowerrc                         // bower config: plugins install path
├─ bower.json                       // bower config: plugins list
├─ gulpfile.js                      // gulp config: task configuration
└─ package.json                     // npm config: dependencies list

Support

Visit Clean UI Support Dashboard