README
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. Whennpm run build
is executed, this folder is compiled to serve up our documentation inpublic
in the browser atlocalhost: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 thepublic
folder and rebuild it.- Run
npm run build:clean
to removepublic
folder - Run
npm run build:all
to buildpublic
folder
- Run
npm start
to view the documentation onlocalhost: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://<gemfurykey>@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