oui-hackweek.md

📘 Get Started with OUI

• 🎨 Import CSS
• 📦 React via Webpack — CodeSandbox
• 🌈 React no Webpack — CodePen
• 📐 Layouts

🎨 Import CSS

Link to the latest oui.css only, no components included, always up-to-date:

<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/design.optimizely.com/oui/latest/styles.css" />

🔖 For a list of helper classes available to use, see this Table of CSS properties in Storybook

📦 React via Webpack

See the CodeSandbox Example

1. Add OUI to your existing JavaScript project:

yarn add optimizely-oui

2. Import OUI components in your app:

import React from 'react';
import { Button } from 'optimizely-oui';
...
return ( <Button size="tiny">Click Me</Button> );

3. Include CSS:

<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/design.optimizely.com/oui/latest/styles.css" />

🌈 React no Webpack

See the CodePen Example

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/design.optimizely.com/oui/latest/main.js"></script>

<div class="push-quad">
  <h1>Hello OUI React</h1>
  <div id="app"></div>
</div>

<script>
ReactDOM.render(
  <Button style='highlight'>I&apos;m a React Button</Button>,
  document.getElementById('app')
);
</script>

📐 Layouts