Skip to main content

Getting Started with HelixUI

The HelixUI library provides front-end developers a set of reusable CSS classes and HTML Custom Elements that adhere to Helix design standards. Adopting the library will enable developers to build products with consistent markup, styles, and behavior across a variety of frameworks.

Step 1: Install HelixUI

NPM Download unpkg

Using npm:

npm install helix-ui

If you prefer Yarn, use the following command:

yarn add helix-ui

If HelixUI is not available in your chosen package manager, pre-built assets are available for download.

Download HelixUI (v0.13.1)

Assets do not include 3rd party dependencies (e.g., web component polyfills ).

Alternatively, you can load HelixUI directly from unpkg.com via the following URLs.

Development

  • https://unpkg.com/helix-ui@0.13.1/dist/styles/helix-ui.css
  • https://unpkg.com/helix-ui@0.13.1/dist/scripts/helix-ui.browser.js

Production (minified)

  • https://unpkg.com/helix-ui@0.13.1/dist/styles/helix-ui.min.css
  • https://unpkg.com/helix-ui@0.13.1/dist/scripts/helix-ui.browser.min.js

Step 2: Install Polyfills

To ensure that HelixUI has the minimum set of behavior required to function across all supported browsers, the Web Components polyfills must be installed.

  1. Install @webcomponents/webcomponentsjs via one of the methods shown below.
  2. Copy or extract the polyfills into your application's target output directory.
  3. Proceed to "Step 3: Choose a Layout".

Version 2.x (or later) is recommended, because it is more efficient in loading required polyfill bundles.

NPM Download unpkg

Using npm:

npm install @webcomponents/webcomponentsjs

If you prefer Yarn, use the following command:

yarn add @webcomponents/webcomponentsjs

Download and extract one of the archives listed in the webcomponentsjs releases .

Alternatively, you can load the polyfills directly from unpkg.com via the following URLs.

  • https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js
  • https://unpkg.com/@webcomponents/webcomponentsjs@2/custom-elements-es5-adapter.js

Visit the Polyfills guide for more details.

Step 3: Choose a Layout

  1. Choose one of the layouts shown below.
  2. Download the template into your project folder.
  3. Modify the template markup to conform to your application's file structure.

Visit the Layouts component documentation for customization details.

Vertical Layout Horizontal Layout

Lengthy content can push the footer below the bottom of the viewport.

vertical layout thumbnail

Download Template   Preview Layout

Content is arranged horizontally in panels while the footer remains visible at all times.

vertical layout thumbnail

Download Template   Preview Layout

Step 4: Add Content

Add content and interactivity to your application using components. Documentation for a component contains interactive demos and details about various interaction patterns.

  1. Choose a component from the navigation on the left.
  2. Check the "See Also" section on the component page for more information.