HelixUI with Vanilla HTML - HelixDesignSystem/helix-ui GitHub Wiki
(a.k.a. No framework)
Installing
Prerequisites
- Latest stable NodeJS (for the
npm
andnpx
command-line utilities) helix-ui
v0.18.0 or later
Assumptions
(all paths are relative to the root of the project directory)
- Web server assets live in
public/
- Application assets live in
public/assets/
(coded by you) - Vendor assets live in
public/vendor/
(coded by 3rd party)
Instructions
1. Install NPM Assets
npm install helix-ui vendor-copy
vendor-copy
allows you to automatically copy bundled assets to your project afternpm install
.
2. Configure package.json
2.1 - Modify package.json
Include the following configurations:
{
"scripts": {
"postinstall": "vendor-copy"
},
"vendorCopy": [
{
"from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
"to": "public/vendor/webcomponents-loader.js"
},
{
"from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/bundles",
"to": "public/vendor/bundles"
},
{
"from": "node_modules/helix-ui/dist/css/helix-ui.min.css",
"to": "public/vendor/helix-ui.min.css"
},
{
"from": "node_modules/helix-ui/dist/js/helix-ui.module.min.js",
"to": "public/vendor/helix-ui.module.min.js"
},
{
"from": "node_modules/helix-ui/dist/js/helix-ui.min.js",
"to": "public/vendor/helix-ui.min.js"
}
]
}
2.2 - Copy Vendor Assets
Run the following to copy files configured via the vendorCopy
configuration, above.
npx vendor-copy
NOTE: You may also want to verify that your postinstall
script is working as expected, by running npm install
.
3. Consuming Assets in your App
Follow the instructions in the "Getting Started" guide, starting from "Consuming Assets" (we've already handled steps 1 and 2 in the instructions above).
Compatibility
- Be aware of built-in methods and properties of HTMLElement and its prototype chain.
- Node ← Element ← HTMLElement
- WARNING: Be aware that
autocomplete
for forms has browser compatibility issues.
Other Notes
TBD...