Shards Dashboard Lite

Documentation

Quick Start

Last updated: October 17, 2018

This short guide will walk you though getting started with Shards Dashboard Lite.

What’s inside?

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.

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 Lite uses and provides support for the following third-party libraries:

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 and has been tested with the following browsers:

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