@wework/oui
WeWork.com Styleguide
Last updated 2 years ago by glosch .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install @wework/oui 
SYNC missed versions from official npm registry.

npm version

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,
  }),
],
Downloads
Today 0
This Week 0
This Month 156
Last Day 0
Last Week 0
Last Month 234
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |