@wework/oui-scss

Oui Sass

Apps

• wework-com-node - via node
• socialweb (WIP) - via gem
• benefits (WIP) - via gem

Setup

• npm install @wework/oui-scss --save-dev
• Add your Project to the list of projects in this readme. (so we know to propagate changes to oui-sass in your app)

with Gulp

var gulp = require('gulp');
    sass = require('gulp-sass');
    postcss = require('gulp-postcss');
    autoprefixer = require('autoprefixer');
    lost = require('lost');

gulp.task('sass:dev', function () {
  var processors = [
    autoprefixer(),
    lost()
  ];

  return gulp.src('app/assets/css/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: ['app/assets', 'node_modules'],
      outputStyle : 'compressed',
      sourceComments: 'map',
    }))
    .pipe(postcss(processors))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/assets/css'));

});

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

@import "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.

Gem

• check out https://manage.fury.io/dashboard/wework-dev/intro?kind=ruby for more

Update the gem version

• update version.rb
• gem build oui.gemspec
• curl -F package=@oui-<X.X.X> https://@push.fury.io/wework-dev/

Include in your project

• source <gemfury> do gem 'oui' end in Gemfile

Usage Examples

• //= require oui/jstest in application.js
• @import "oui/colors"; in application.scss

Troubleshooting

• link //fast.fonts.net/cssapi/c2c8e24c-a3bd-4123-b613-b52df06369d5.css in application.html