Install Guide

Adding Hx/UI into a project

You only need 1 CSS or SCSS file to use Hx/UI

1. Use NPM


npm install @helix/hxui-css --save

2. Import the compiled css into a index.html file.


<link rel="stylesheet" href="/node_modules/@helix/hxui-css/dist/static/css/hxui.css">

3. Alternatively import the uncompiled .scss file into an existing projects scss.


@import "/node_modules/@helix/hxui-css/static/static/scss/hxui.scss";

Please note that by importing the scss file, icons may not work due to the icon font files path.
To change the path simply override it via the $icons-path: '../fonts/'; scss variable.


// set the icon path before you import
$icons-path: '../fonts/';
@import "/node_modules/@helix/hxui-css/static/static/scss/hxui.scss";

Modular

Just import what you need

You can import components individually.

For example, let's say you only want the HxUI grid. The file is located in the HxUI/scss/components/grid folder.
Simply import the utilities dependencies, and then the files you need directly:


@import "/node_modules/@helix/hxui-css/static/static/scss/utilities/_all";
@import "/node_modules/@helix/hxui-css/static/static/scss/components/grid";

Designed to optionally work in parallel with other frameworks

In order for HxUI to work with other frameworks, you will need to set $framework-wrap to true.
Once enabled, the .hxui-reset class is required to be the parent class for any HxUi specific styles to work.

For apps that wish to use multiple frameworks, add this class to any container that is HxUi specific.


<div class="hxui-reset">
...

Documentation

Running documentation locally

One command to load them all.

You can easily run the documentation locally by running the following command in terminal or command prompt.


npm start

There're basic requirements to run the documentation locally. You will need to install Node Package Manager(npm) and VueJS in order to run the documentation.