Shards Dashboard Pro

Documentation

Quick Start

Last updated: May 3, 2019

This guide will walk you through setting up and getting your way around Shards Dashboard Pro.

What’s inside?

After you’ve purchased and downloaded your copy of Shards Dashboard Pro you will notice the following project structure:

/*
├── images/                             // Images directory.
│    └── ...                            // Directories for each individual template.
├── scripts/                            // Scripts directory.
│   ├── app/                            // Individual template related scripts.
│   │   └── ...                     
│   ├── shards-dashboards.1.0.0.js      // Main JavaScript file.
│   ├── shards-dashboards.1.0.0.js.map  // Sourcemap for the main JavaScript file.
│   ├── shards-dashboards.1.0.0.min.js  // Minified version of the main JavaScript file.
│   └── shards.2.0.2.min.js             // Main Shards JavaScript file.
├── styles/                             // Styles directory.
│   ├── scss/                           // Source SCSS files.
│   │   └── ...                 
│   ├── shards-dashboards.1.0.0.css     // Main Shards Dashboards CSS file.
│   └── shards-dashboards.1.0.0.min.css // Minified version of the main CSS file.
├── blog-overview.html
├── change-password.html
├── components-blog-posts.html
├── components-overview.html
├── ecommerce.html
├── edit-user-profile.html
├── errors.html
├── file-manager-cards.html
├── file-manager-list.html
├── forgot-password.html
├── header-navigation.html
├── icon-sidebar-nav.html
├── index.html
├── login.html
├── register.html
├── transaction-history.html
├── user-profile.html
├── DEPENDENCIES.md                     // List of all the project dependencies.
└── LICENSE.md                          // License.                                    */

✨Tip: Depending on the license package purchased you might also get a secondary archive with all the design assets.

Using the SCSS Files

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 yarn or 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";

Dependencies

By default Shards Dashboard Pro uses and provides support for the following third-party libraries:

Compared to Shards, none of the dependencies mentioned above are bundled inside the main JavaScript file. This leaves the choice to you, the developer, to create your own customized bundle or include only the libraries you are using locally or via a CDN.

You can find out more about all dependencies used across Shards Dashboards and their licenses inside the DEPENDENCIES.md file.

Browser Compatibility

So far, the template pack is currently compatible with the following browsers:

  • Chrome 50+
  • Firefox 45+
  • Internet Explorer 11
  • Edge 14+
  • Safari 9+