klara-ui
v11.5.2
Published
A shared library for the klara components and interface
Downloads
586
Keywords
Readme
Klara-UI
A repository for shared components and styles used in Klara.
Get Started
npm install klara-ui
Publishing
npm run bump
npm publish [--tag next]
Usage
Layout
Components
Klara UI comes with a set of components. They adhere to the overall design, and allow for some configuration.
- SearchBar
- Accordion
- Badge
- Button
- Dateformat
- Datepicker
- Dropdown
- Icon
- MediaSlider
- MenuBar
- Modal
- Notification
- Popover
- Spinner
- Switch
- TextField - Custom
- TextField
- TextHighlight
- Timepicker
- Tooltip
Styles
All the styles should be in the form of .styl If you add a new file don't forget to import it in the styles.styl
Using the styles
Including styles in your own project can be tricky if not done correctly. Fortunately we can use stylus loader for resolving to .styl files in nodemodules
Include all the styles in your .styl with:
@import "~klara-ui/style/styles.styl"
You can also specify the precise path for a file, eg.
@import "~klara-ui/style/variables/typography.styl"
Read more at: https://www.npmjs.com/package/stylus-loader
Site
The styleguide is publicly available at http://bonniernews.github.io/klara-ui.
The site
folder contains all code for the site. Build and run it using the npm scripts:
npm run site:start
npm run site:build
npm run site:publish