# Introduction

# Use Your Design System Everywhere!

Kickstand UI can be easily implemented in any of your projects regardless of the technologies that are already in place.

It also means that you can have a Design System that is designed to be customized to match your brand with a few simple value changes rather than extensive overriding of the default CSS.

stenciljs logo + product clarion logo

Kickstand UI is built using StencilJS and Clarion to create a design system that is very easy to implement in any project because it is built completely on standards based native Web Components and a style framework designed for scale and reusability.

# Performant

It is also important to note that, since Kickstand UI is a framework-less design system, it is incredibly light-weight. The initial size is about 13KB of CSS and 7KB of JavaScript in modern browsers!

# Stencil

Stencil (opens new window) is a compiler that generates Web Components (more specifically, Custom Elements) and is used to build Kickstand UI's highly performant component library. Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Kickstand UI takes advantage of Stencil's compiler to provide a number of valuable features such as:

  • Async rendering
  • Reactive data-binding
  • Strongly Typed Components (if you are using TypeScript)
  • Standards-based Native Web Components
  • Polyfills for legacy browser support

# Clarion

Clarion (opens new window) is a style framework for composing design systems and promotes standards-based development. Leveraging the power of SASS (opens new window), it provides a toolbox for design token and style reusability. It also provides the capability to customize the design system to your meet your brand guidelines by updating a few values.

Some of the features Clarion provides are:

  • CLI for managing styles
  • Clear style architecture to make scaling and maintaining the project easier
  • Customizable design tokens
  • Reusable mixins and functions to reduce development time