@huement/ui v0.3.104
| 
Based on Bootstrap 5's sass framework, it really shines when used in a text heavy content setting, such as a blog page, where it can greatly improve the overall reading experience.
@huement/ui is not a full featured theme for bootstrap 5, nor is it suitable for building complex applications with intricate ui's that process data and allow end users to perform actions. Instead, use it on a blog, or a simple landing page, a one off project index.html page etc.
hui is easily configured via $SCSS_Variables then build with npm run css to produce a CSS file (and optionally a custom SVG based icon font). Simply load that resulting CSS file into whatever HTML5 based application you're developing and you're good to go!
INSTALL
The best way to use @huement/ui is to install it via your favorite node package manager (npm, yarn etc) and then import the sass files into your app.
$ npm install @huement/ui
$ yarn add @huement/uiYou will always need to import the library, and then optionally you can include to import icons here as well.
@import '~@huement/ui/scss/mojo';
// optionally import the icons
@import '~@huement/ui/dist/hi/icons';CSS VARIATION INSTALL
Rather that include the SCSS files and bundling that, you can instead simply add the CSS file to your app's \<head>. Although you will likely want to build it at least once yourself, once you customize the colors etc. and then include that compiled css file.
BUILDING A CUSTOM CSS FILE
Building your own version of @huement/ui is easy and can be broken up into the following simple steps: Clone the repo, customize the SCSS variables, run the build command.
$ git clone @huement/ui hui
$ cd hui
$ npm install
# ... customize scss files ...
$ npm run buildLIVE DEVELOPMENT MODE
If you are looking to do more than change some colors, you likely want to run the live development server with hot reloading etc to make customizing things much easier. Assuming you have already cloned the reposity are working from its root directory
$ npm run dev• SECTIONS
hui is designed to be SIMPLE! The folder structure is a testament to that principle.
- bin ❱ command line scripts
- dist ❱ finalized output
- public ❱ static files
- src ❱ SCSS framework
- tokens ❱ design variables
- web ❱ documentation & demo content
NOTES: • Everything in the public folder is copied to the /dist/ folder on build. • /dist/ is routinely deleted. Never attempt to make a permanent change to anything in that folder directly. Modify /scss/ and rebuild.
SCSS FRAMEWORK
TODO: this part needs a lot of work
STYLE + DESIGN TOKENS
- tokens/icons ❱ TODO Fantasticon details
- tokens/chords.json ❱ TODO explain how to generate this
- stack.json + color_tokens.json ❱ TODO sort out the token color files
⬦ public
So the directory structure goes like this:
━━❪ public ❫
━━━▶ demo
━━━▶ favicon
━━━▶ fonts• web
INSTALL
...
@huement/ui | HUEMENT USER INTERFACE
version | 0.1.*
codename | mojo