Our UI library is two parts: 1. Reusable HTML/CSS patterns which makes writing new CSS mostly unnecessary, and 2. Scalable React components which creates consistent HTML output and pattern use.
State of Documentation
- current 30.0.0+ - all React components (Storybook)
- old 28.5.0 - includes React (Custom documentation)
- old 9.0.0 - includes Classic Optimizely (CSS-only)
What's Inside OUI?
- CSS helper classes for padding and margin
- Sizing (width/height)
- Flexbox layout
- Forms, errors, empty states, attention bars, help poptips
- Tables for data and dashboards
Using the CSS
- Reference pure OUI:
- Or the full Optimizely X css bundle
https://cdn.optimizely.com/app-pci/dist/css/app.css for more completeness (until we finish merging Optimizely X SASS overrides into OUI)
Using React Components
git clone https://github.com/optimizely/oui.git && cd oui && yarn install
yarn storybook - Compile CSS/JS and view React components
OUI, Optimizely's UI library, is a collection of CSS/HTML patterns and React components meant to be combined and extended to create larger interfaces.
- Abstracted. Component names shouldn't be derived from the content they contain. Class names should convey structural meaning.
- Reusable. Components should be generic enough to be reused throughout the site. They should make no assumptions what page/view they will be used on. Problems solved in one area should be easily applied elsewhere.
- Mixable. Components should be able to join together to create larger blocks.
- Powered by variables. Nearly all design elements — colors, fonts, spacings, shadows — should be defined using the pre-existing variables.
By achieving these goals our code becomes...
- Scalable. Reusing patterns means new elements can be created faster and with minimal additional CSS.
- Consistent. Not only will developers be able to read each other's code more easily we'll have a better end-user experience across the product.
- Simpler Since we're constantly reusing low-level objects to build larger ones we cut down on CSS bloat. Less code means fewer bugs.