@cubefuse/qube

The Cubefuse Design System.

1.0.0
1.0.0
latest
Source
npm

Version published: 5 years ago

Weekly downloads: 39; increased by21.88%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

Built according to Cubefuse branding on top of Bootstrap (4.1.3), Qube provides a solid foundation for web projects, while being lightweight with a stylesheet weighing just 13.5kb.

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.

FAQs

What is @cubefuse/qube?

Is @cubefuse/qube popular?

Is @cubefuse/qube well maintained?

Package last updated on 26 Apr 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install