Installation

CDN

Installing Kickstand UI is as easy as adding a few tags to your page.

<!-- global styles and utility classes -->
<link rel="stylesheet" href="https://unpkg.com/kickstand-ui/dist/kickstand-ui/kickstand-ui.css" />

<!-- scripts for browsers that support ES modules -->
<script type="module" src="https://unpkg.com/kickstand-ui/dist/kickstand-ui/kickstand-ui.esm.js"></script>
<!-- scripts for browsers that do not support ES modules (legacy browsers) -->
<script nomodule src="https://unpkg.com/kickstand-ui/dist/kickstand-ui/kickstand-ui.js"></script>

NOTE

For the best user experience, be sure to include both script tags.

Package Manager

If you are using build tools or a framework, you can add it to your project as an NPM package.

npm install --save kickstand-ui

# or

yarn add kickstand-ui

Add To Your Project

import { applyPolyfills, defineCustomElements } from "kickstand-ui/loader";

// Apply the polyfills and bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements();
});

Styles

Kickstand UI was written using SASS (opens new window). Using SASS is not required to use and customize Kickstand UI for your needs, but we have created some great SASS tools to really accelerate the development process. You can import them into your project from kickstand-ui/src/scss/styles.scss.

If you are planning on using the compiled CSS, you can find it at kickstand-ui/dist/kickstand-ui/kickstand-ui.css.

Editor Integrations

Kickstand UI provides a custom-elements.json configuration file. This file provides data for editors to generate auto-complete and validation for components.

VS Code

If it doesn't already exist, create a file at the root of your project in .vscode/settings.json and paste the following code into it. If it does exits, just add the html.customData property to the top of the file.

{
    "html.customData": [
        "./node_modules/kickstand-ui/dist/custom-elements.json"
    ]
}

Framework Integrations

Kickstand UI is built with native web components which makes it framework agnostic! You can implement it in any of your projects regardless of the framework you are using.

Add To Your Project