yoss-ui

Yoss UI Components Library

Summary

• yoss-ui
  • Summary
  • Install
  • Usage
  • Contributing
    • UI Component explorers
      • Storybook
      • Styleguidist
    • How to group CSS properties
  • License

Install

npm install --save yoss-ui

Usage

import React, { Component } from 'react'
import { MyComponent } from 'yoss-ui'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

Contributing

UI Component explorers

Storybook and Styleguidist are used to build YOSS ui components in isolation.

Both are configured with hot reloading, providing great tool for local development / testing / UI checking.

Storybook

1. Build storybook npm run storybook:build.
2. Run storybook npm run storybook
3. Open http://localhost:9009

Styleguidist

1. Build styleguide npm run styleguide:build.
2. Run styleguide npm run styleguide
3. Open http://localhost:6060

How to group CSS properties

Group CSS properties by type (Nicolas Gallagher's Idiomatic CSS)

.selector {

  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333333;
  outline: 0;
  margin: 10px;

  /* Fonts */
  font-family: Arial;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #cccccc;

  /* Other */
  background: #000;
  cursor: pointer;
  text-align: right;

}

License

MIT ©