Meet Louis, the official mascot of OUI.
This document contains four parts:
http://design.optimizely.com/docs/oui/
This “living” style guide is built in React and is automatically updated with each new OUI release.
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.
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';
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.
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.