@wework/oui-scss NPM

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