Optimizely's Component Library
JavaScript CSS Other
Switch branches/tags
Clone or download
jessicalc Add oui-rule selector to horizontal rule css #1016 (#1017)
* Add oui-rule selector to horizontal rule css

* update changelog oops
Latest commit be443bb Aug 13, 2018
Permalink
Failed to load latest commit information.
.storybook Release 29.4.0 (#928) Mar 2, 2018
assets Animated gif. Dec 17, 2015
data Update docs and version 29.1.0 (#923) Feb 22, 2018
docs Update docs and version 29.1.0 (#923) Feb 22, 2018
scripts Update docs and version 29.1.0 (#923) Feb 22, 2018
src Add oui-rule selector to horizontal rule css #1016 (#1017) Aug 13, 2018
storybook Adding EditableInput component (#1014) Aug 8, 2018
.babelrc Reorder plugins in babelrc according to recommentations from owners (#… Jun 18, 2018
.eslintignore Remove gatsby (#955) May 25, 2018
.eslintrc.js Release 29.4.0 (#928) Mar 2, 2018
.gitignore Remove gatsby (#955) May 25, 2018
.jshintrc Add .jshintrc file to set js version to 6, needed for editor Jan 27, 2018
.npmignore Remove gatsby (#955) May 25, 2018
.nvmrc Release 29.4.0 (#928) Mar 2, 2018
.scss-lint.yml Explicitly define the placeholder colors (#407) Jun 1, 2016
.travis.yml Rotate NPM Key (#997) Jul 18, 2018
CHANGELOG.md Add oui-rule selector to horizontal rule css #1016 (#1017) Aug 13, 2018
CODEOWNERS maintenance (code review): CODEOWNERS clarification (#976) Jul 25, 2018
CONTRIBUTING.md Add npm link notes... Aug 2, 2018
LICENSE.md Update LICENSE.md Jan 20, 2016
README.md bullets Jun 6, 2018
codecov.yml Set Codecov to only post comments in GitHub PRs when coverage changes. ( Oct 14, 2016
deploy_rsa.enc Add React components to OUI (#428) Jun 30, 2016
index.js Drau/index js export (#963) Jun 18, 2018
jest.config.js Rename .jest.config.json to jest.config.js (#973) Jun 26, 2018
package-lock.json Adding EditableInput component (#1014) Aug 8, 2018
package.json Adding EditableInput component (#1014) Aug 8, 2018
postcss.config.js Speed up local React JavaScript compilation. (#631) Oct 10, 2016
webpack.config.js Update docs and version 29.1.0 (#923) Feb 22, 2018
yarn.lock Prep for new release version 31.8.2 (#1002) Jul 26, 2018

README.md

Build Status codecov Gitter Live Documentation

OUI Component Library

Louis

Meet Louis, the official mascot of OUI.

Introduction

This document contains four parts:

  1. Documentation
  2. Including OUI in your project
  3. Contributing to OUI

Documentation


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:

  1. 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.
  2. 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