Pratik Borsadiya's blog

Vali Admin

A free, modular and easy to customize dashboard theme built using Bootstrap, SASS and Pug JS.

DemoDownloadReport IssueGitHub

Introduction

Vali is a free and responsive dashboard theme built with Bootstrap, PugJS and SASS. It's fully customizable and modular. You don't need to add the code, you will not use.

The issue with the most admin themes out there is that if you will see their source code there are a hell lot of external CSS and javascript files in there. And if you try to remove a CSS or Javascript file some things stops working.

That's why I made Vali. The goal is, a light weight yet expendable and good looking theme. The theme has all the features required in a dashboard theme but this features are built like plug and play module.

Directory Structure

│
├── dist - compiled files
│   ├── css
│   ├── images
│   └── js
└── src - Layout and style source files
    ├── pug - Layout source
    └── sass - Style source

Compilation of source files

The theme is built using SASS and PugJs which are in turn compiled into HTML and CSS by Grunt. If you are not familiar with Grunt, here is an article to get started. If you are familiar with Grunt follow the instruction mentioned bellow to edit or customize the source.

If you don't want to edit theme you can use the compiled files directly inside dist folder.

Run npm install command in project root directory to install and build dependencies.

Use grunt watch task to edit and compile source files on the go or use grunt build task to compile all source files at once.

Layout Customization

The layout is built using PugJs. All the layout source files are located in src/pug directory. There are two sub directories inside this directory:

  1. layout - It the common HTML skeleton layout which is extended by all the pages
  2. includes - It include layout partials like sidebar and navbar and footer

Style Customization

The styles are written in SASS. All the style files are located in src/sass directory. There is a file in this directory main.sass which imports all the files and exported as main.css There are four sub directories inside this directory:

  1. 1-tools - It includes styles of all the external libraries and a file _var.sass which contains the variables required for the application
  2. 2-basics - It contains the basic style like overall structure css and theming options
  3. 3-component - It contains the styles for the components like card, widgets, sidebar, navbar etc
  4. 4-pages - It contains the styles for the specific pages like login page, lock-screen page

To customize the primary color of the theme and sidebar you need to change the variables in the 1-tools/_var.sass. The detailed documentation about changing the colors is mentioned in this file itself.

If you don't want to use particular component or plug-in just comment the import statement for that particular component in src/sass/main.sass and compile the SASS by running grunt build command.

Please note that the Bootstrap source files in this theme are heavily modified to maintain the look and feel of this theme but the HTML markup remains same for every component. Also Bootstrap Glyphicons in this theme are replaced by Font-Awesome Icons.

Compatibility with other frameworks

This theme is not built for a specific framework or technology like Angular or React etc. But due to it's modular nature it's very easy to incorporate it into any front-end or back-end framework like Angular, React or VueJs or Node JS. The CSS is modular enough to be incorporated in any framework. While the Javascript used to make the components interactive can be used from any of the following framework.

If you are using Angular you can use ui-bootstrap, for React use React-Bootstrap and for VueJs you can use VueStrap.

If you are using Node JS as your web server you can use pug as your layout engine to render html templates. More details are available here.

Contribution

If you liked the theme do star and fork it on GitHub. If you find anything missing or want to contribute to this documentation, the source is available here. If you have an issue or feature request regarding theme please report it here.