daverau-optimizely

📘 Get Started with OUI

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

daverau-optimizely

OUI Colors

$base-black                  : #000;
$base-white                  : #FFF;

$root-color: (
  grey-85                    : tint($base-black, 15%),
  grey-78                    : tint($base-black, 22%),
  grey-50                    : tint($base-black, 50%),

daverau-optimizely

Design Systems

A Design System isn’t a Project. It’s a Product, Serving Products.: Shifting Focus from Design and Development to Managing and Marketing a System

Defining Design Systems: Getting to the Root of What Your System Really Is

A Design System’s Reach: Practical Levels to Discuss How Broadly Your System Applies

Design Systems are for People: A transcript of Jina Anne's presentation for Design Systems Coalition NYC

daverau-optimizely

# -----------
# Custom aliases for folders
# -----------
alias oui='cd ~/Sites/oui'

# -----------
# History forever
# -----------
# http://stackoverflow.com/questions/9457233/unlimited-bash-history
HISTFILESIZE=-1

daverau-optimizely

1. Update any lego- CSS classes to oui-:

   This:

   <div class="lego-dropdown-group">
       ...
   </div>
   

...becomes this:

daverau-optimizely

Make a New Character

1. Randomly generate a character Class, Race and short backstory

   Classes?

   • Barbarian the relentless combatant, fueled by fury or it's totem bonds with animals; in tune with the natural order

   • Bard story teller/musician using wit, magic, and lore to escape or avoid tight situations

daverau-optimizely

// Create JS bookmarklet here: http://mrcoles.com/bookmarklet/

// Toggle function
function toggleReact(key) {
  if (localStorage.getItem(key) === 'true') { 
    localStorage.setItem(key,false);
    console.log('Highlighting has been disabled.');
  } else {
    localStorage.setItem(key,true);
    console.log('Highlight React enabled!');

daverau-optimizely

// From
title: tr('Archive')

// To
title: tr.pluralize('Archive Audience', 'Archive {0} Audiences', audiences.length)

daverau-optimizely

Easy passing of styles

const classes = classNames({
  [`oui-vertical-align-cells--${ props.verticalAlign }`]: props.verticalAlign,
});

And JSX use: <Element className={ classes }>

daverau-optimizely

.oui-text-input--search {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><g id="Layer_1"><path d="M6.21,12.417C2.786,12.417,0,9.632,0,6.209C0,2.785,2.786,0,6.21,0c3.422,0,6.206,2.785,6.206,6.209 C12.416,9.632,9.632,12.417,6.21,12.417z M6.21,1C3.337,1,1,3.337,1,6.209s2.337,5.208,5.21,5.208		c2.87,0,5.206-2.336,5.206-5.208S9.08,1,6.21,1z"/><path d="M15.5,16c-0.128,0-0.256-0.049-0.354-0.146l-5.25-5.25c-0.195-0.195-0.195-0.512,0-0.707s0.512-0.195,0.707,0l5.25,5.25 	c0.195,0.195,0.195,0.512,0,0.707C15.756,15.951,15.628,16,15.5,16z"/></g></svg>'); // #search16
  background-repeat: no-repeat;
  background-position: left 8px center;
  background-size: 16px 16px;
}