Shards

Documentation

Quick Start

Last updated: February 8, 2018

Getting started with Shards is easy. This guide will walk you through setting it up in no time so you can start building beautiful UIs.

Manual Installation

If you’ve downloaded Shards manually, make sure you unzip the archive and include the shards.min.css stylesheet inside your project’s <head> section after the Bootstrap 4 stylesheet. If you need to use one of the custom JavaScript powered controls like datepickers or slider controls, you also need to include the Shards vendor JavaScript file at the end of your page, before the ending </body> tag.

Dependencies

Shards’ only hard dependencies are Bootstrap 4’s core stylesheet and jQuery for its custom components. Some Bootstrap 4 components also require Popper.js and the official Bootstrap 4 JavaScript file.

To learn more about Bootstrap’s dependencies, make sure you read the JavaScript section from the official Bootstrap 4 documentation.

Starter Template

If you’re starting a new project from scratch, you can use the following HTML starter template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS Dependencies -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/shards.min.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="js/shards.min.js"></script>
  </body>
</html>

The template above includes the Bootstrap 4 stylesheet, the Shards minified stylesheet and finally the Bootstrap 4 and Shards script dependencies. Keep in mind that you might be required to update the file paths accordingly.