@readme/ui

A modular component library and design system for the ReadMe front end.

Usage no npm install needed!

<script type="module">
  import readmeUi from 'https://cdn.skypack.dev/@readme/ui';
</script>

README

ReadMe UI

Owlblocks! UI component library and design system for ReadMe's front end. 

npm install -S @readme/ui

Workflow

Run these commands to develop and document UI components locally:

npm start     # start the local Styleguidist dev server
npm test      # run tests against the UI library
npm run watch # watch and rebuild, for local linked dev

Creating New Components

Use the elem command to quickly scaffold out a new component or composition:

npm run elem -- MyUIElement "composition" # or "component" by default

This generates the JSX file, stylesheet, tests, and markdown docs for your new element all in one go.

Architecture

src/
│ ui/             # UI component library:
│ ├ components/   # - lower-level UI building blocks
│ └ compositions/ # - higher-order UI constructs
└ styles/         # SCSS vars, mixins; CSS resets; etc.

Under the Hood

This repository brings together a number of utilities and tools for various front end development workflows:

Dependencies  
React & Sass for components and styling
Styleguidist to power our living documentation
Babel & Webpack/NWB for transpiling and compilation
Lodash for various Javascript utility methods