jade-file

doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
    title Post Process

    link(rel='stylesheet', type='text/css', href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900,900italic,700italic,400italic,100italic')
    link(rel='stylesheet', type='text/css', href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700')
    link(rel='stylesheet', type='text/css', href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700')
    link(rel='stylesheet', type='text/css', href='http://fonts.googleapis.com/css?family=Alfa+Slab+One')

    link(rel='stylesheet', type='text/css', href='build/build.css')

  body

    article

      section(data-bespoke-state="theme--watermellon" data-bespoke-hash='postcss')
        h2 PostCSS
        h4 Don't 
          i pre-process 
          | the 
          i post-process
        icon(name="ei-arrow-down" size="s")
        icon(name="ei-sc-github" size="s") 

      section(data-bespoke-state="theme--mint" data-bespoke-hash='pre-and-post-processors')
        h4.bold Pre-process (Sass, LESS, Stylus or Vanilla CSS)
        p.hairline Write CSS faster with logic and power
        h4.bold Post-process
        p.hairline Clean up where your compiler left off


      section(data-bespoke-state="theme--white" data-bespoke-hash='post-processing-examples')
        h3 These are 
          br 
          | post-processes:
        ul
          li.bullet Minification - CSSWring
          li.bullet Browser prefixing - Autoprefixer
          li.bullet REM to px - Pixrem
          li.bullet Streamlining media queries - CSS MQPacker
          li.bullet Can I Use? - Do I use
          li.bullet CSS 3 polyfills for IE - CSS Grace
          li.bullet CSS4 - cssnext
          li.bullet More coming!


      section(data-bespoke-state="theme--watermellon" data-bespoke-hash='pleeease')
        h2 Wicked Easy
        h3 Just use 
          a(href='http://pleeease.io') Pleeease
          
        pre.language-bash
          code.
            $ npm install -g pleeease
            
        pre.language-bash
          code.
            $ pleeease watch

      section(data-bespoke-state="theme--dark" data-bespoke-hash='diy')
        h2 Or, make your own...


      section(data-bespoke-state="theme--red" data-bespoke-hash='gulp')
        h2
          a(href='http://gulpjs.com/') Gulp 
          | time fuckers!
        
        pre.language-bash
          code.
            $ npm install --global gulp
      
      section(data-bespoke-state="theme--mint" data-bespoke-hash='gulpfile')
        h2 gulpfile.js
        pre.language-javascript
          code.
            var sass = require('gulp-ruby-sass');
            var autoprefixer = require('gulp-autoprefixer');
            
            gulp.task('styles', function() {
              return gulp.src('app/styles/main.scss')
                .pipe(sass())
                .pipe(autoprefixer({browsers: ['last 3 versions']}))
                .pipe(gulp.dest('dist/styles'));
            });

      
      section(data-bespoke-hash='performance')
        h2 Performance
        ul
          li Sass     1153 ms
          li Stylus   283 ms
          li Less     150 ms
          li libsass  109 ms
          li PostCSS  36 ms
          
        p
          a(href="http://ai.github.io/about-postcss/en/?full#36") Source

      section.emphatic-text(data-bespoke-backdrop='emphatic')
        h2 Emphatic Slide!
        h3 Powered by <a href="https://github.com/markdalgleish/bespoke-backdrop">bespoke-backdrop</a>

      section(data-bespoke-hash='learn-more')
        h2 Learn more...
        ul
          li 
            a(href="http://twin.github.io/2014/09/css-pre-vs-post-processing/") CSS pre- vs. post-processing
          li 
            a(href="http://www.sitepoint.com/css-post-processing-pleeease/") CSS Post-Processing With Pleeease
          li 
            a(href="http://pleeease.io/play/") Pleeease play
          li 
            a(href="http://ai.github.io/about-postcss/en/") PostCSS: the Future after Sass and LESS
          li 
            a(href="http://www.sitepoint.com/introduction-gulp-js/") Introduction to Gulp JS
          li
            a(href="http://sass-guidelin.es/") Sass Guidelines
            
      section(data-bespoke-state="theme--mint" data-bespoke-hash='colophone')
        h2 Colophone
        ul
          li 
            icon(name="ei-arrow-down" size="s") 
            a(href="http://github.com/brownerd/postprocess") Source code
          li 
            icon(name="ei-sc-github" size="s") 
            a(href="https://github.com/markdalgleish/bespoke.js") Bespoke.js
          li 
            icon(name="ei-heart" size="s") 
            a(href="http://evil-icons.io/") Evil Icons
          li 
            icon(name="ei-sc-github" size="s") 
            a(href="http://gulpjs.com/") Gulp
          li 
            icon(name="ei-sc-github" size="s") 
            a(href="http://www.browsersync.io/") Browser-Sync
          li 
            icon(name="ei-sc-github" size="s") 
            a(href="http://jade-lang.com/") Jade
          li 
            icon(name="ei-sc-github" size="s") 
            a(href="http://learnboost.github.io/stylus/") Stylus
            
          li
            icon(name="ei-sc-github" size="s")
            a(href="http://www.google.com/fonts/specimen/Roboto+Slab") Roboto Slab

    script(src='build/build.js')