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

• Lists

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