OUI Component Library

Meet Louis, the official mascot of OUI.

Introduction

This document contains four parts:

Documentation
Including OUI in your project
Contributing to OUI

Documentation

http://design.optimizely.com/docs/oui/

This “living” style guide is built in React and is automatically updated with each new OUI release.

Including OUI in your project

OUI is published as an npm module called optimizely-oui that contains Sass files and React components.

To install:

npm install optimizely-oui --save

This will save it within your project's node_modules/ folder.

Using OUI Sass files

OUI consists of two parts:

Core OUI Sass
- Base styles used as the foundation for any site.
- This code lives in this OUI repository and is loaded before application specific Sass.
Project specific Sass (mobile website, developer site, etc…)
- Project specific Sass built with OUI code such as variables or mixins.
- This code lives in the project repo, pulling OUI as a dependency.

For example, if you're building a mobile site, your main SCSS file mobile.scss would contain:

// # Mobile Website
// Root file driving the Mobile Website CSS.

// ## OUI and custom functions
@import '../node_modules/optimizely-oui/src/oui/partials/sass/functions';
@import 'mobile-website/functions';

// ## OUI and custom variables
// The mobile website variables file can contain new variables or overwrite existing variables.
@import '../node_modules/optimizely-oui/src/oui/oui-variables';
@import 'mobile-website/mobile-variables';

// ## OUI and custom partials
// Partials are files that import other components
@import '../node_modules/optimizely-oui/src/oui/oui-partials';
@import 'mobile-website/mobile-partials';

// ## Overrides (helper/utility classes)
// Overrides use `!important` classes for overrides and should always be loaded last.
@import '../node_modules/optimizely-oui/src/overrides/admin';
@import '../node_modules/optimizely-oui/src/overrides/background';
@import '../node_modules/optimizely-oui/src/overrides/borders';
@import '../node_modules/optimizely-oui/src/overrides/layout';
@import '../node_modules/optimizely-oui/src/overrides/margin';
@import '../node_modules/optimizely-oui/src/overrides/padding';
@import '../node_modules/optimizely-oui/src/overrides/type';
@import '../node_modules/optimizely-oui/src/overrides/sizing';

Using OUI React components

OUI comes with React components that can be used instead of copying and pasting HTML from the documentation. You can view these components locally by running npm run docs:watch after cloning the repository and installing dependencies with npm install.

These components can be used in a React codebase by requiring OUI:

import Button from 'optimizely-oui';

We provide React documentation that includes information on our component props and default values.

React Components Dev Status:

Component	Status	Component	Status	Component	Status
Accordion	⬜	Array	⬜	ArrowInline	✅
Attention	✅	Badge	✅	BlockList	✅
BlockList/Category	✅	BlockList/Item	✅	Button	✅
ButtonRow	✅	Card	✅	CheckBox	✅
Code	✅
Dialog	⬜	Disclose	✅	Dropdown	✅
Help	⬜	Input	✅	InputIcon	⬜
Label	✅	Media	⬜	Nav	⬜
OverlayWrapper	✅	Pagination	⬜	Popover	✅
Poptip	✅	ProgressBar	✅	ProgressDots	✅
Radio	✅	Search	⬜	Select	✅
Spinner	✅	Stats	⬜	Steps	⬜
Table	✅	Tabel/TBody	✅	Tabel/TD	✅
Tabel/THead	✅	Tabel/TR	✅	TabNav	✅
TabNav/Tab	✅	Textarea	✅	Token	✅
TextField	✅

Contributing to OUI

Want to run OUI locally? Clone this repository and run npm install. The npm run command will list all the available commands.

See CONTRIBUTING.md for more information

fastestOrange / oui