| 1 | # Klara-UI
|
| 2 |
|
| 3 | A repository for shared components and styles used in Klara.
|
| 4 |
|
| 5 | ## Get Started
|
| 6 |
|
| 7 | ```
|
| 8 | npm install klara-ui
|
| 9 | ```
|
| 10 |
|
| 11 | ### Publishing
|
| 12 |
|
| 13 | ```
|
| 14 | npm run bump
|
| 15 | npm publish [--tag next]
|
| 16 | ```
|
| 17 |
|
| 18 | ## Usage
|
| 19 |
|
| 20 | ### Layout
|
| 21 |
|
| 22 | * [Lists](http://bonniernews.github.io/klara-ui/#/layout/lists)
|
| 23 |
|
| 24 | ### Components
|
| 25 |
|
| 26 | Klara UI comes with a set of components. They adhere to the overall design, and allow for some configuration.
|
| 27 |
|
| 28 | * [SearchBar](http://bonniernews.github.io/klara-ui/#/components/SearchBar)
|
| 29 | * [Accordion](http://bonniernews.github.io/klara-ui/#/components/Accordion)
|
| 30 | * [Badge](http://bonniernews.github.io/klara-ui/#/components/Badge)
|
| 31 | * [Button](http://bonniernews.github.io/klara-ui/#/components/Button)
|
| 32 | * [Dateformat](http://bonniernews.github.io/klara-ui/#/components/DateFormat)
|
| 33 | * [Datepicker](https://bonniernews.github.io/klara-ui/#/components/Datepicker)
|
| 34 | * [Dropdown](http://bonniernews.github.io/klara-ui/#/components/Dropdown)
|
| 35 | * [Icon](http://bonniernews.github.io/klara-ui/#/components/Icon)
|
| 36 | * [MediaSlider](https://bonniernews.github.io/klara-ui/#/components/MediaSlider)
|
| 37 | * [MenuBar](https://bonniernews.github.io/klara-ui/#/components/MenuBar)
|
| 38 | * [Modal](https://bonniernews.github.io/klara-ui/#/components/Modal)
|
| 39 | * [Notification](http://bonniernews.github.io/klara-ui/#/components/Notifications)
|
| 40 | * [Popover](https://bonniernews.github.io/klara-ui/#/components/Popover)
|
| 41 | * [Spinner](http://bonniernews.github.io/klara-ui/#/components/Spinner)
|
| 42 | * [Switch](http://bonniernews.github.io/klara-ui/#/components/Switch)
|
| 43 | * [TextField - Custom](https://bonniernews.github.io/klara-ui/#/components/TextFieldCustom)
|
| 44 | * [TextField](http://bonniernews.github.io/klara-ui/#/components/TextField)
|
| 45 | * [TextHighlight](https://bonniernews.github.io/klara-ui/#/components/TextHighlight)
|
| 46 | * [Timepicker](https://bonniernews.github.io/klara-ui/#/components/Timepicker)
|
| 47 | * [Tooltip](https://bonniernews.github.io/klara-ui/#/components/Tooltip)
|
| 48 |
|
| 49 | ### Styles
|
| 50 |
|
| 51 | All the styles should be in the form of .styl
|
| 52 | If you add a new file don't forget to import it in the styles.styl
|
| 53 |
|
| 54 | #### Using the styles
|
| 55 |
|
| 56 | Including styles in your own project can be tricky if not done correctly.
|
| 57 | Fortunately we can use stylus loader for resolving to .styl files in node*modules*
|
| 58 |
|
| 59 | Include all the styles in your .styl with:
|
| 60 |
|
| 61 | ```
|
| 62 | @import "~klara-ui/style/styles.styl"
|
| 63 | ```
|
| 64 |
|
| 65 | You can also specify the precise path for a file, eg.
|
| 66 |
|
| 67 | ```
|
| 68 | @import "~klara-ui/style/variables/typography.styl"
|
| 69 | ```
|
| 70 |
|
| 71 | Read more at: https://www.npmjs.com/package/stylus-loader
|
| 72 |
|
| 73 | ## Site
|
| 74 |
|
| 75 | The styleguide is publicly available at [http://bonniernews.github.io/klara-ui](http://bonniernews.github.io/klara-ui).
|
| 76 |
|
| 77 | The `site` folder contains all code for the site. Build and run it using the npm scripts:
|
| 78 |
|
| 79 | ```
|
| 80 | npm run site:start
|
| 81 | npm run site:build
|
| 82 | npm run site:publish
|
| 83 | ```
|