AL-UI Admin

Documentation

Download Go to Dashboard
Getting Started

This guide will help you get started with ALUI! All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to wraptheme@gmail.com

If you really like our work, design, performance and support then please don't forgot to rate us on Themeforest,
it really motivate us to provide something better.

Dev Setup

To get started, you need to do the following:

  1. Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.
  2. Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/filename.scss` and output a plain-css file to `dist/assets/css/filename.css`.
  3. Grunt JSHint: Run grunt jshint command from your project directory. It will checks all *.js files under `assetsjs/filename` for common syntax or coding errors using the JSHint utility.
  4. Grunt Sprite: Run grunt sprite command from your project directory.
  5. Further help: To get more help on the grunt checkout Grunt
  6. Note: However, any SASS code you write must be able compile via Grunt as well.It will generate pre-compiled javascript templates. Reads all the *.html files from `assets/js/filename` and outputs `assets/js/filename.templates.js`. Template.js will contains code of UI design and will be change each time you build solution through above command.

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

File Structure
  • dist - Generated production files
    • assets
      • bundles - Bundling plugins JS file
      • css - Compiled CSS
      • fonts - Cerebri font and Feather Icon font
      • images - Image assets
      • plugin - Third party plugins
    • layout - 10+ HTML layout ( A to I with container and sub-header)
    • partials - HTML partials
  • docs - Generated production files
  • js - Javascript source
  • node_modules - NPM dependencies (by default the folder is not included) npm installs dependencies.
  • scss - SCSS source for theme
    • bootstrap - Custom bootstrap components
    • generic - Animation, Helpers class
    • global - variables, themes, mixins
    • plugin - all plugin scss file
    • skeleton - 10+ layout separate file
    • widgets - All widgets
    • main.scss - Project main scss file
  • Gruntfile.js - All the build commands
  • package.json - List of dependencies and npm information
  • .gitignore - Hide all unnecessary files from Git
  • README.md
Ready to build Layouts

Customize your overview page layout. Choose the one that best fits your needs.

Theme Color Settings
Left sidebar with icon
Privew View Code
Privew View Code
Privew View Code
Privew View Code
Privew View Code
Header top menu
Theme Color Settings
Privew View Code
Privew View Code
Privew View Code
Privew View Code
Privew View Code
Privew View Code
Content Combinations
Theme Color Settings
Privew View Code
Privew View Code
Privew View Code
Advantages
  • Avoiding the probabilities of conflicts between Front codes and third party plugins (libraries).
  • Intuitive clear architecture.
  • Everything is structured, each component in its own file and in its component in the main object.
  • The ability of extending functionality without affecting the behavior of the core object and not changing the existing functionality.
  • Creation of wrapper components simply solves complicated initializations structures for the users.
  • Very easy access to any starters components and core settings from anywhere in the template.
Customer Reviews #

We're very glad that out of thousands of different templates you chose ours. This inspires further product development, more than sales profit. Thank you!

Design Quality

Design is superb, better than any of the others including some of the highest rated in themeforest like Metronic. they code base is solid. Occasionally there are some issues but their support is lightning fast. I had issues twice so far and got a response that would solve my problem within 1 hour.
capchaos - Austria

Code Quality

Amazing work, a lot of elements design so nice, flexible, when I told them that the code has a little bug, they correct quickly and friendly
Ktuluwu - France

Feature Availability

Really provides Everything which an Angular admin panel needs. I really like everything about it, but the reason for 5 stars is definitely the Feature Availability and the UI Kit. I am Buyer of your previous template into HTML and Impressed with the designs for each item, support, documentation, code quality and many other things.
geegstudio - United States

Other

I am very happy and surprised by the quality of the subject, but what really surprised me was the quality of the support team. They solved each of my concerns before and during the purchase process. In addition, they managed by me the purchase of this update without any inconvenience. Very good work!
OssCarvajal - Chile
Template Credit
Google font https://fonts.google.com/
Bootstrap https://v5.getbootstrap.com/
Jquery https://jquery.com/
SASS https://sass-lang.com/
Grunt https://gruntjs.com/
NPM https://www.npmjs.com/
Fontawesome https://fontawesome.com/v4.7.0/
Weather Icons http://erikflowers.github.io/weather-icons/
Apex Charts https://apexcharts.com/
Sparkline Charts https://omnipotent.net/jquery.sparkline/#s-about
Datatables https://www.datatables.net/
Fullcalendar https://fullcalendar.io/
Pexels https://www.pexels.com/
THANK YOU!

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

If you really like our work, design, performance and support then please don't forgot to rate us on Themeforest, it really motivate us to provide something better.

Need a Custom Work?

Send us request
if you need custom development
Hire Us
Thanks for choosing wrraptheme Admin.

© AL-UI. 2021 ThemeMakker.