Lucid

Please wait...

Documentation

  • Documentation

Start Lucid Angular

Lucid - Angular + Bootstrap 4 Admin Template

  • Created: 18-Fab-2019
  • latest update: 18-Fab-2019

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email at 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.

Brief Overview

Lucid Angular Admin Template is a popular open source WebApp Angular template for Angular admin dashboards and admin panels. It’s responsive Admin template, which is based on the Angular 7X + Bootstrap 4X framework. It utilizes all of the Bootstrap components integrated with Angular layout standards and re-styles many commonly used plugins to create a consistent design that can be used as a Angular applications.

Angular 7

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

Bootstrap 4X

Bootstrap is a free and open source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to facilitate the development of responsive, mobile-first sites and apps

Easily Customizable

The internet is society’s true equalizer. It gives voices to the masses, as people from across the world can now express their opinions and ideals. Not since the industrial revolution, has humanity experienced such a game-changing invention.

HTML5/CSS3

HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web.

Integrated plugins

You can enable one or more of the integrated Apache Cordova plugins to extend the functionality of your app. The integrated plugins are custom Apache Cordova plugins that the AppBuilder team modifies, configures and updates regularly.

Responsive layout

Let this collection of responsive designed websites across a variety of website types help get your creative and developer juices flowing. Each site features a screenshot across 4 device widths and you can see the media queries.

Angular Installation

This template is also built in Angular and requires Node 8.9.4 and NPM 5.6.0 to be installed.

Angular version 7.2.4 is used to build angular application.

Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js

Angular-CLI: You can install angular-cli by executing following command from your terminal install -g @angular/cli/. More details can be found here Angular-CLI

Project setup: After installing Node, NPM and Angular CLI run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.

Development server: Run ng serve command from project directory and navigate to http://localhost:4200/ into your browser.

Build: Run ng build command from project directory to build the project. The build artifacts will be stored in the dist/ directory.

Further help: To get more help on the angular-cli use ng --help or go check out Angular-CLI.

Main Features

  • Angular 7
  • Bootstrap 4x
  • Latest jQuery v3.3.1
  • Clean and Creative Landing Page Included (Free $14)
  • Fully Responsive pages
  • Light & Dark Versions
  • RTL Full Versions
  • Lucid
  • Unique Dashboard
  • 6 Unique Color Scheme
  • 50+ Use Full Pages (No extra pages)
    • Built in SASS
  • JS Bundling Ready (Bundle) New
  • Fully Responsive & Interactive
  • Elegant & Clean User Interface
  • 3000+ Icons
  • Detailed Documentation
  • Google fonts (Ubuntu)
  • Ready to Use Application
  • Inbox Full App New
  • Chat App New
  • Calendar integration
  • Contact CardNew
  • User
  • File Manager New
  • Invoice
  • Invoice V2New
  • User Profile Page
  • User Profile V2 Page New
  • Image Gallery (Bootstrap 4 Gallery)
  • Image Gallery V2
  • Messenger Notifications
  • Timeline New
  • Other
  • Rich Text Editor
  • E Charts
  • Responsive Tables
  • Progress Bars

Grunt File & Installation The JavaScript Task Runner.

Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.

Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `assets/scss/filename.scss` and output a plain-css file to `/assets/css/filename.css`.

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.

Grunt Sprite: Run grunt sprite command from your project directory.

Further help: To get more help on the grunt checkout Grunt

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.

Folder Structure

We follow standard Angular fodler structure and other created files are as following

Template assets files can be located at
/src/assets/*
Routes can be located at
/src/app/app.routing.ts 
/src/app/light/light.routing.ts
Layout files can be located at
/src/app/layout/*
Navigation Bar and Sidebar can be located at
/src/app/layout/header/* 
/src/app/layout/sidebar/*
Default Error page can be locate at
/src/app/authentication/page-not-found/*

SCSS Structure

Please note that all Detail main Web Site, you need to set it up on your project Click Here..

- SCSS

main.css is the main CSS file located in assets/css/ folder of the package. Whole CSS file is well indexed with topic and its related code.

Font Used

Google fonts are used in the template. They are as follows: Ubuntu

Font Awesome: Click to See

All Images are used: 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.