Kickstand UI
The Design System You Can Use Everywhere!
Tools to help you build applications everyone can love!
# Quick Start
Adding Kickstand UI to your project is as easy as adding a few tags to your project.
<!-- 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.
# Start Using
Now you have access to the tools and can start adding components to your project!
<ks-button shows="test_modal">Show Modal</ks-button>
<ks-modal id="test_modal" modal-title="Kickstand UI">A modal with just 2 lines of code!</ks-modal>
Check out our documentation for more in-depth instructions on adding it to your project.
# Extremely Performant
Kickstand UI is built using web components, so no additional JavaScript frameworks are necessary to run it. In addition to that, components are lazy-loaded in modern browsers, so the initial payload is only 7KB of JavaScript and 13KB of CSS!
As you use components throughout your application, the HTML, JavaScript, and CSS will only be loaded when it is used, so you only load what you need.
(These are the Lighthouse scores for this site!)
# User Experience (UX) and Accessibility
The Kickstand UI framework is designed to make your application as usable as possible regardless of the user's circumstances. Great effort has gone into ensuring that content has sufficient color contrast, proper HTML semantics, appropriate roles and aria attributes, as well as ensuring the overall design and aesthetics make the components easy to use and interact with.
In the documentation for each of the components, there is an Accessibility section with all of the relevant information about any features that have been added to make the component more accessible and any information you should know to ensure your application is accessible.
If you feel that an improvement can be made to provide a better user experience or better accessibility, please reach out.
# Developer Experience (DX)
One of the priorities of Kickstand UI is to make creating applications as effortless as possible to developers and content creators while keeping it flexible enough to meet your needs. You should be able to prototype and develop feature-rich applications with very little custom code. However, if you need to customize the framework, you can add custom design tokens and CSS to get the look and feel you are looking for.
Kickstand 2.0 now uses CSS Variables to standardize all design tokens across your application!
# Browser Support
All of Kickstand UI's components are built using standards-based web components (opens new window). Browser support has greatly improved over the years. For features that are not fully supported, polyfills have been added (which will be included as-needed) to provide a great experience no matter what browser you are using.
Supported browsers include:
- Chrome
- Chromium-based browsers (this includes browsers like Brave, the new Microsoft Edge, and Vivaldi)
- Firefox
- Safari
- Opera
- Microsoft Edge (legacy)
- Internet Explorer 11
# Framework Support
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.