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 librarydocs
- the documentation/display of our styleguide
sections
- where to include example usage of componentsstyleguide.jsx
- a view of all sectionsstyleguide.scss
- styleguide-specific sass
webpack
- config!
Example Setup with Webpack
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,
}),
],