To install HelixUI and its dependencies, run the following from the root of your project.
Once complete, assets should be available in
In order to serve the required assets, run the following commands from the root of your project.
Once complete, the directory structure of
should resemble the following:
To validate that assets are loading as we progress, let's add
the following to the
<body> of our markup.
When viewed in a browser, the heading should be visible but you won't
see any icon. This is because
been upgraded yet to a custom element (handled as part of
HelixUI.initialize() functionality). We'll fix the icon
in a later step.
To load HelixUI styles, add the following markup
If configured correctly, the
should be rendered in a thin, sans-serif font.
The Web Components polyfills are built specifically to be
run directly in the browser (uncompiled and unbundled).
As such, we'll add the following markup to the
<head> of our document.
webcomponents-loader.js polyfill script uses feature
detection to identify the minimum polyfill bundle required by the
current browser. If the browser requires polyfills, an additional
<script> element (loading a polyfill bundle from
vendor/bundles/) will be injected after the loader.
In order to load HelixUI in a way that is compatible with the largest
set of browsers, add the following markup to the bottom of the
<hx-icon> should render a visible SVG image.
The markup in
public/index.html should resemble the following markup.
Now that everything is wired up correctly, here are some suggestions for what to do next.
- Configure a Layout to arrange page content consistently across your application.
Explore the documentation to learn how you can add meaningful interactivity to your application.