Created
January 13, 2015 04:37
-
-
Save gandhiShepard/cfdc493af663b0a43fea to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment