CSS preprocessors have revealed to front-end developers the shortcomings of CSS. But there was a catch: you had to choose your language and stick with it. Would you go Sass? Or try LESS? Was Stylus your flavor? PostCSS, built on Node, is a CSS transforming engine that lets you choose (and write) the plugins that you need (or want) to take your styling source files and turn them into CSS. It's fast; it's flexible; it's awesome.

1. PostCSS
A dumb name
for an awesome thing.
by Miles Rausch
http://milesrausch.com

2. Hyperlinks
Slides
Demo
https://slides.com/awayken/2016devobjective
https://slides.com/awayken/2016devobjective/live
https://github.com/awayken/2016devobjective

3. Hi. I'm Miles.
@awayken milesrausch.com

4. Let's talk about CSS

5. Not quite recognizable

6. Not quite consistent

7. Let's talk about preprocessors

8. Sass/SCSS
http://sass-lang.com/

9. LESS
http://lesscss.org/

10. Stylus
http://learnboost.github.io/stylus/

11. Preprocessor problems

12. Introducing: PostCSS

13. PostCSS is a dumb name

14. It's an engine

15. for plugins to transform

16. into almost anything.
Save effort
Autoprefixer ( )
cssnano ( )
Enforce standards
cssnext ( )
stylelint ( )
Have fun
Canadian Stylesheets ( )
Instagram ( )
Browse plugins at
GitHub
GitHub
GitHub
GitHub
GitHub
GitHub
http://postcss.parts/

17. Demo time.
Let's start here:
You'll need .
https://github.com/awayken/2016devobjective
NodeJS and npm

18. #1.0.0
Our original project
#1.0.1
PostCSS:
https://github.com/postcss/postcss#usage

19. #1.0.2
Stylelint
Autoprefixer
cssnano
http://stylelint.io/
https://github.com/postcss/autoprefixer
http://cssnano.co/

20. #1.1.0
Font Magician:
postcss-import:
cssnext:
https://github.com/jonathantneal/postcss-font-magician
https://github.com/postcss/postcss-import
http://cssnext.io/

21. #2.0.0
Updated for dev.Objective() 2016
#2.1.1
postcss-placehold:
https://github.com/awayken/postcss-placehold

22. The End
Slides
Demo
https://slides.com/awayken/2016devobjective
https://github.com/awayken/2016devobjective