Oui - WeWork.com Styleguide

Setup

• npm install @wework/oui --save

Directory Structure

|-- app/
    |-- assets/
        |-- fonts/
        |-- images/
    |-- components/
        |-- ...presentational components
        |-- index.js
|-- dist/
|-- docs/
    |-- sections/
        |-- ...sections displaying examples of components
    |-- index.html
    |-- index.js
    |-- styleguide.jsx
    |-- styleguide.scss
|-- webpack/
    |-- base.js
    |-- development.js
    |-- entries.js
    |-- env.js
    |-- paths.js
    |-- production.js

• app/assets/components is where we create our presentational components (ie. button, grid, footer)
• dist - generated by npm run prepublish or npm install -- lets us use Oui as a library
• docs - the documentation/display of our styleguide
  • sections - where to include example usage of components
  • styleguide.jsx - a view of all sections
  • styleguide.scss - styleguide-specific sass
• webpack - config!

Example Setup with Webpack

// PostCSS plugins
const cssnext = require('postcss-cssnext');
const postcssImport = require('postcss-import');
const postcssReporter = require('postcss-reporter');
const lostGrid = require('lost');

module: {
  loaders: [
    test: /\.s?css$/,
    loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap!postcss-loader!sass-loader?sourceMap',
    exclude: /(vendor|node_modules)\//,
  ],
},
sassLoader: {
  includePaths: [ jsPath, nodeModulesPath ]
},

postcss: () => [
  postcssImport({ addDependencyTo: webpack }),
  lostGrid(),
  cssnext({
    browsers: [ 'last 2 versions', 'IE > 10' ],
    features: {
      calc: false,
    },
  }),
  postcssReporter({
    clearMessages: true,
  }),
],