Quick start

To use these components in your application, use the appropriate theme code block

HUB24 theme

<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/common.css" />
<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/hub.css" />
<script type="module" src="<UI_FRAMEWORK_LOCATION>/shoelace-autoloader.js"></script>

My Prosperity theme

<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/common.css" />
<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/myp.css" />
<script type="module" src="<UI_FRAMEWORK_LOCATION>/shoelace-autoloader.js"></script>

Class theme

<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/common.css" />
<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/class.css" />
<script type="module" src="<UI_FRAMEWORK_LOCATION>/shoelace-autoloader.js"></script>

Now Infinity theme

<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/common.css" />
<link rel="stylesheet" href="<UI_FRAMEWORK_LOCATION>/themes/ni.css" />
<script type="module" src="<UI_FRAMEWORK_LOCATION>/shoelace-autoloader.js"></script>

Where <UI_FRAMEWORK_LOCATION> is the CDN location that is hosting the framework.

To use the instance you are currently looking at, <UI_FRAMEWORK_LOCATION> is

Latest stable CDN UI_FRAMEWORK_LOCATION = https://hds.hub24.com.au/dist/

If you want to always have the latest stable version from Helix maintainers, you can use this CDN for your Production environment

Next CDN UI_FRAMEWORK_LOCATION = https://hds.hub24.com.au/next/dist/

Next versions are released as-needed. This CDN can be used for Development or Test environment.

Version CDN UI_FRAMEWORK_LOCATION = https://hds.hub24.com.au/2.1.1/dist/

If you want to have a stable CDN without new changes, you can use specific version. Note that, at the moment, we do not provide backporting, so if you require new features, you will have to use the newer versions.

Using the framework

This provides access to the components, eg; to add a button:

Button

<sl-button>Button</sl-button>

This is using Shoelace’s experimental autoloader, which registers components on the fly as you use them. To use the traditional loader, replace shoelace-autoloader.js with shoelace.js when importing the Javascript file.