Installation

Get started with our design system!

Gain access to the Booster Design System—commonly known as the Zywave User Interface (ZUI)—components and stylesheets without having to install a single package.

Determine if your application requires stable third-party components

Required files

There are three required files in order for the Booster Design System bundle to work properly in every application:

  1. zui-bundle.fouc.css - required for a smooth transition while all the scripts on the page loads, especially for non-SPAs
  2. zui-bundle.app.css - required for resetting styles for all base elements in your application
  3. bundle.js* - required to load most ZUI components** properly
<link rel="stylesheet" href="https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/css/zui-bundle.fouc.css" />
<link rel="stylesheet" href="https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/css/zui-bundle.app.css" />
<script type="module" src="https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/bundle.js"></script>

* The bundle.js file is delivered as ES modules and must be loaded from other ES modules, e.g. <script type="module" src="https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/bundle.js"></script>.
** There are some exceptions to what components are part of the ZUI bundle. For example, <zui-table> must be embedded separately. Learn more by visiting the Tables documentation.

Installation

<!doctype html>
<html>
  <head>
    <title>Installation | Booster Development Network</title>

    <!-- These two stylesheets should always be listed before all other application styles -->
    <!-- Make sure `zui-bundle.fouc.css` is always listed first to counter FOUC -->
    <link rel="stylesheet" href="https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/css/zui-bundle.fouc.css" />
    <link rel="stylesheet" href="https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/css/zui-bundle.app.css" />

    <script type="module" src="https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/bundle.js"></script>
  </head>
  <body>
    <!-- your content here -->
  <body>
</html>

Where do I find a list of released packages to install?

@latest and @next tags

You may have noticed in the code snippets above something like @latest

These terms correspond to npm distribution tags, where latest is stable, production-ready code, and next is generally unstable and not suitable to be referenced in a live environment.

These dist tags gives the toolkit the ability to deploy updates and fixes to your application, without you having to lift a finger!

Choose the right tag for your situation, and update accordingly (e.g., https://cdn.zywave.com/@zywave/zui-bundle@latest/dist/bundle.js).

Version numbers

In addition to dist tags, you can use any valid npm version as found here.

This can be generally useful when a critical issue is encountered, or a deprecation notice goes unheeded.

A versioned URL could look something like the following:

https://cdn.zywave.com/@zywave/zui-bundle@1.0.22/dist/bundle.js

Debugging components

We've added unminified JS files for easier debugging since our bundles are very aggressively minified for production, making it very difficult to debug our components. Not only will you be able to debug all Booster components with less effort moving forward, you also get the added benefit of Lit dev logging with extra runtime warnings.

All development build (unminified) files are located in the /dev/ folder instead of the /dist/ of each bundle:

<script type="module" src="https://cdn.zywave.com/@zywave/zui-bundle@latest/dev/bundle.js"></script>
<script type="module" src="https://cdn.zywave.com/@zywave/zui-bundle@latest/dev/components/table.js"></script>

Can I use the development bundles in lower environments for my apps?

We strongly encourage you to do so! However, please don't use them in production since they will reduce your app's performance to end users.

Feedback