Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
137 lines (109 sloc) 7.92 KB
extends ../../layouts/_layout-blog.pug
block variables
var article_title = "Vali Admin - Pratik Borsadiya's blog"
var article_description = "Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular."
var article_url = ""
var article_banner_url = ""
block content
article(itemscope='', itemtype='')
meta(itemprop='image', content='')
h1 Vali Admin
p Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js.
a.btn(href='/vali-admin/', target='_blank') Demo
a.btn(href='' , rel="noopener") Download
a.btn(href='', target='_blank', rel="noopener") GitHub
href="" + article_url,
title="Share on Google Plus",
aria-label="Share on Google Plus",
svg.share-nav__icon: use(xlink:href='#icon-gplus')
href=""+ article_title + "&u=" + article_url,
title="Share on Facebook",
aria-label="Share on Facebook",
svg.share-nav__icon: use(xlink:href='#icon-facebook')
href=""+ article_title + "&url=" + article_url,
title="Share on Twitter",
aria-label="Share on Twitter",
svg.share-nav__icon: use(xlink:href='#icon-twitter')
href=""+ article_url + "&title=" + article_title,
title="Share on LinkedIn",
aria-label="Share on LinkedIn",
svg.share-nav__icon: use(xlink:href='#icon-linkedin')
href="mailto:?subject="+ article_title + "&body=" + article_description + article_url,
title="Share with Email",
aria-label="Share with Email",
svg.share-nav__icon: use(xlink:href='#icon-mail')
img.banner-image(src='vali-admin-banner.gif', data-action='zoom', alt="Vali banner image")
h2.section-title Introduction
p Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular. You don't need to add the code, you will not use.
p Vali 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.
h2.section-title Directory Structure
├── docs - <i>compiled files</i>
│   ├── css
│   ├── images
│   └── js
└── src - <i>Layout and style source files</i>
&nbsp;&nbsp;&nbsp;&nbsp;├── pug - <i>Layout source</i>
&nbsp;&nbsp;&nbsp;&nbsp;└── sass - <i>Style source</i>
h2.section-title Compilation of source files
p 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, #[a(href="", target="_blank", rel="noopener") here] is an article to get started. If you are familiar with Grunt follow the instruction mentioned bellow to edit or customize the source.
p If you don't want to edit theme you can use the compiled files directly inside #[code docs] folder.
p Run #[code npm install] command in project root directory to install and build dependencies.
p Use #[code npm run dev] task to edit and compile source files on the go or use #[code npm run build] task to compile all source files at once.
h2.section-title Layout Customization
p The layout is built using PugJs. All the layout source files are located in #[code src/pug] directory. There are two sub directories inside this directory:
li #[code layout] - Includes common HTML skeleton layout which is extended by all the pages
li #[code includes] - Includes layout partials like sidebar and navbar and footer
h2.section-title Style Customization
p The styles are written in SASS. All the style files are located in #[code src/sass] directory. There is a file in this directory #[code main.sass] which imports all the files and exported as main.css There are four sub directories inside this directory:
li #[code 1-tools] - It includes styles of all the external libraries and a file #[code _var.scss] which contains the variables required for the application
li #[code 2-basics] - It contains the basic style like overall structure css and theming options
li #[code 3-component] - It contains the styles for the components like card, widgets, sidebar, navbar etc
li #[code 4-pages] - It contains the styles for the specific pages like login page, lock-screen page
p To customize the primary color of the theme and sidebar you need to change the variables in the #[code 1-tools/_var.scss]. The detailed documentation about changing the colors is mentioned in this file itself.
p If you don't want to use particular component or plug-in just comment the import statement for that particular component in #[code src/sass/main.scss] and compile the SASS by running #[code npm run build] command.
h2.section-title Compatibility with other frameworks
p 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.
p If you are using Angular you can use #[a(href="", rel="noopener") ui-bootstrap], for React use #[a(href="", rel="noopener") React-Bootstrap] and for VueJs you can use #[a(href="", rel="noopener") VueStrap].
p 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 #[a(href="", target="_balnk") here].
h2.section-title RTL Support
p To enable RTL support
li Uncomment this line #[code @import '3-component/rtl';] in #[code src/sass/main.scss].
li Add #[code dir="rtl"] attribute to #[code &lt;html&gt;] tag in #[code src/pug/layouts/_layout.pug].
li Build the source files using #[code npm run build] command.
h2.section-title Contribution
p If you liked the theme do star and fork it on #[a(href="", target="_blank", rel="noopener") GitHub]. If you find anything missing or want to contribute to this documentation, the source is available #[a(href="", target="_blank", rel="noopener") here]. If you have an issue or feature request regarding theme please report it #[a(href="", target="_blank", rel="noopener") here].
block javascript
// Scripts
script(type='text/javascript', src='')
script(type='text/javascript', src='/js/transition.js')
script(type='text/javascript', src='/js/zoom.min.js')