OUI

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
  • Borders
  • Sizing (width/height)
  • Flexbox layout
  • Forms, errors, empty states, attention bars, help poptips
  • Tables for data and dashboards

Using the CSS

  • Reference pure OUI: https://cdn.optimizely.com/app-pci/dist/css/app.css
  • 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

  1. git clone https://github.com/optimizely/oui.git && cd oui && yarn install
  2. yarn storybook - Compile CSS/JS and view React components

Philosophy

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.