@wework/oui-scss

Oui Sass

Setup

npm install @wework/oui-scss --save-dev

To include all of Oui's styles in your project, import like so:

@import "@wework/oui-scss/src/base";

It is optional to use both Normalize-scss and Eric Meyer's Reset CSS. You should include them before importing Oui:

@import "@wework/oui-scss/src/reset";
@import "@wework/oui-scss/src/normalize";
@import "@wework/oui-scss/src/base";

If you would like to use our default font, Proxima Nova, include the following script tag in the head of your html:

<script src="//fast.fonts.net/jsapi/bc942a26-8ea5-4d85-b69e-a4afa56b5011.js"></script>

For our secondary font, Knockout, include the following in the head of your html:

<link rel="stylesheet" href="//cloud.typography.com/6353954/695546/css/fonts.css" />

For the icons:

<link rel="stylesheet" href="//fontastic.s3.amazonaws.com/aagNC9rxuN29yoHxEKJed4/icons.css" />

Directory Structure

(truncated, only showing one component in src, for the sake of simplicity)

├── docs
│   ├── styleguide
│   │   ├── styleguide.jade
│   │   ├── styleguide.jsx
│   │   ├── styleguide.scss
│   ├── entry.js
│   ├── index.html
├── node_modules
├── public
├── src
│   ├── components
│   │   ├── header
│   │   │   ├── header.jade
│   │   │   ├── header.jsx
│   │   │   ├── header.scss
│   │   ├── index.js

• docs/ - Imports all components necessary for the docs into Styleguide.jsx. entry.js is our entry point for webpack. When npm run build is executed, this folder is compiled to serve up our documentation in public in the browser at localhost:8080.
• public/ - Generated by webpack. Compiled and minified docs for reference.
• src/components - Where everything we need to build beautiful websites lives.

Build

• npm run build to both delete the public folder and rebuild it.

  • Run npm run build:clean to remove public folder
  • Run npm run build:all to build public folder

• npm start to view the documentation on localhost:8080.

PostCSS BEM Linting

• When adding a new stylesheet, always include the PostCSS Bem Linter definition as the first line in your file. ie) /** @define oui-header */, in order to properly lint your styles.

• FIX all errors/warnings you may see in your console before asking for a +1.