@cubefuse/qube NPM

Getting Started

Qube can be installed with npm or yarn

npm install --save @cubefuse/qube bootstrap
yarn add @cubefuse/qube bootstrap

The distributed Qube assets are also available via CDN through unpkg and jsDelivr.

Dependencies

The only hard dependency is Bootstrap 4 (final) which needs to be included in your HTML document before Qube. Datepickers and slider controls also require the Qube JavaScript dependency.

Quick Start

If you're using a bundler like webpack, you should skip to Usage with Bundlers.

In order to take advantage of both Bootstrap and Qube' features you may want to use the following starter template that includes all dependencies.

<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/@cubefuse/qube@latest/dist/css/qube.min.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Qube JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@cubefuse/qube@latest/dist/js/qube.min.js"></script>
  </body>
</html>

Usage with Bundlers

If you're using a bundler like webpack (with style-loader/css-loader) or parcel, you can install qube with npm and import it:

// app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import '@cubefuse/qube/dist/css/qube.min.css';
// Optional JavaScript
// JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Qube JS
// Install them with `npm` as well
import 'jquery/dist/jquery.slim.min';
import 'popper.js/dist/umd/popper.min';
import 'bootstrap/dist/js/bootstrap.min';
import '@cubefuse/qube/dist/js/qube.min';

Built using

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Acknowledgments

While building this project we used various free resources built and made available by some wonderful people around the world. See the ATTRIB.md file for details.

Changelog

View notable changes.

5 years ago

5 years ago