@wework/oui-scss

Oui Sass

Apps

• wework-com-node - via node
• https://github.com/WeConnect/sales_goalie - via node
• socialweb (WIP) - via gem
• benefits (WIP) - via gem
• referral-web - 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";

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

Because this library currently relies heavly on WebPack. The gem includes both a compile css and js of all the components and the original scss file containing the different variables for re-use.

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

Update the gem version

• update version.rb
• rake build
• 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 in application.js
• @import "oui"; in application.scss
• @import "oui-var"; in application.scss for accessing the color and grid variables

Troubleshooting

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