Quick StartLast updated: October 17, 2018
This short guide will walk you though getting started with Shards Dashboard Lite.
After you’ve downloaded your copy of Shards Dashboard Lite you will notice the following project structure:
/* ├── images // Images directory. ├── scripts // Scripts directory. │ ├── app // Individual template related scripts. │ ├── extras.1.0.0.min.js │ ├── shards-dashboards.1.0.0.js │ ├── shards-dashboards.1.0.0.js.map │ └── shards-dashboards.1.0.0.min.js ├── styles // Styles directory. │ ├── accents │ ├── scss // Source SCSS files. │ ├── extras.1.0.0.min.css │ ├── shards-dashboards.1.0.0.css │ └── shards-dashboards.1.0.0.min.css ├── add-new-post.html ├── components-blog-posts.html ├── errors.html ├── form-components.html ├── index.html ├── tables.html ├── user-profile-lite.html ├── DEPENDENCIES.md // List of all the project dependencies. └── LICENSE.md // License. */
✨Tip: The design assets are distributed separately.
The SCSS files have one single dependency, the main Shards UI kit. In order to be able to compile the SCSS files you need to include the main Shards package (not compiled) inside your project or install it via
npm depending on your project structure.
Finally, make sure you adjust the paths accordingly inside the
shards-dashboards.scss file (line 15) to match Shards’ path. The example below assumes that your SCSS files are placed inside a
styles folder and you are using NPM to manage your dependencies.
/* Base Shards UI Kit */ @import "../node_modules/shards-ui/src/scss/shards";
By default Shards Dashboard Lite uses and provides support for the following third-party libraries:
- (Basic Support) Chart.js - 2.7.1
- Bootstrap Datepicker (inherited from Shards)
- NoUiSlider (inherited from Shards)
You can find out more about all dependencies used across Shards Dashboards and their licenses inside the
So far, the template pack is currently compatible and has been tested with the following browsers:
- Chrome 50+
- Firefox 45+
- Internet Explorer 11
- Edge 14+
- Safari 9+