1. Use NPM
npm install @hxui/css --save
2. Import the compiled css into a index.html file.
<link rel="stylesheet" href="/node_modules/@hxui/css/dist/static/css/hxui.css">
3. Alternatively import the uncompiled .scss file into an existing projects 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/@hxui/css/static/static/scss/hxui.scss";
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/@hxui/css/static/static/scss/utilities/_all"; @import "/node_modules/@hxui/css/static/static/scss/components/grid";
In order for HxUI to work with other frameworks, you will need to set
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"> ...
You can easily run the documentation locally by running the following command in terminal or command prompt.
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.