This is a shared Vue.js component library for use in the in all holistic-web projects. Boostrap Vue is used to drive the core of the functionality.
| Category | Value |
|---|---|
| Project Type | Component Library |
| Package Name | @holistic-web/el-layout |
| Demo URL | https://el-layout-stories.web.app |
| Key Dependencies | Bootstrap Vue |
To use this library in a Vue app, simply include:
import 'layout';
import 'layout/dist/layout.css';
in your main.js file to make the components available.
The following SCSS variables can also be accessed with: @import 'layout/src/theme'.
$primary: $colour-orange-dark;
$highlight: $colour-blue;
$secondary: $colour-blue-light;
$dark: $colour-blue-dark;
$light: $colour-white;
$warning: $colour-pink;
$danger: $colour-red;
$success: $colour-green;
$info: $colour-cream;
Run the following command to open up a demo of the components:
npm run storybook
Be sure to update this demo in the /docs folder as we improve the library.
This project can be built as a library with the following commands
npm install
npm run build-bundle
Publishing for this project is handled by our Github workflow on merge into the master branch.
Manual publishing is not recommended but if we need to try the following (provided you are logged into npm and authorized):
npm publish --access public
Remember to increment the version number in package.json and package-lock.json.
- This project uses storybook to provide visual documentation. This storybook deployment is released automatically by the
.github/workflows/deploy-storiesaction.
- upgrade to latest storybook
- resolve "withNotes" is deprecated console error and markdown errors
- add breakpoints to the storybook examples
- allow override of theme colours