FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS
http://postcss.org/
FrontendUnited Conference | PostCSS Ghent 2016-06-27
There’s a new library every minute (second)
https://www.flickr.com/ph...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS WHY?
● Fast
● Well adopted
● Modular - Just what you need
● E...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
FAST
https://www.flickr.com/photos/sponselli/
FrontendUnited Conference | PostCSS Ghent 2016-06-27
It’s fast
https://github.com/postcss/benchmark
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Well adopted
https://www.flickr.com/photos/robertdouglass/
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Well adopted
http://npm-stat.com/charts.html?package=postcss
FrontendUnited Conference | PostCSS Ghent 2016-06-27
autoprefixer
●
So you are probably already using PostCSS without know...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
How does it work?
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Execution
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Execution
var postCSS = require('postcss');
var inputCSS = '.myClass ...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Examples
https://www.flickr.com/photos/debord/
FrontendUnited Conference | PostCSS Ghent 2016-06-27
PostCSS-Nested
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSS MQPacker
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSNano
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Easy transition
FrontendUnited Conference | PostCSS Ghent 2016-06-27
From SCSS to PostCSS
●https://github.com/postcss/postcss-import
●http...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Easy to extend
https://www.flickr.com/photos/-imax-/
FrontendUnited Conference | PostCSS Ghent 2016-06-27
It’s just JavaScript
https://github.com/postcss/postcss-mixins
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Extend - new plugin
https://github.com/postcss/postcss-plugin-boilerp...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Example: postcss-focus
https://github.com/postcss/postcss-focus
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Here be dragons
Nothing is stopping you to produce spaghetti.
https:/...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
handle with care
FrontendUnited Conference | PostCSS Ghent 2016-06-27
The future - now!
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSnext
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSSnext
http://cssnext.io/features/#custom-properties-var
FrontendUnited Conference | PostCSS Ghent 2016-06-27
CSS is not a programming language
It really isn’t, however:
calc()
co...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
LINKS
https://www.smashingmagazine.com/2015/12/introduction-to-
postc...
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Andreas Sahle (@pixelmord)
@wunderkraut_de
https://wunder.io/de/
Nächste SlideShare
Wird geladen in …5
×

PostCSS - process CSS in a modular way.

935 Aufrufe

Veröffentlicht am

PostCSS primer on how to use this CSS processing library and how to transition from SASS. Introduction to plugin architecture and how to extend with own plugins. Bring future CSS features to your workflow now. Held at FrontendUnited Conference in Ghent May 2016.

Veröffentlicht in: Internet

PostCSS - process CSS in a modular way.

  1. 1. FrontendUnited Conference | PostCSS Ghent 2016-06-27 PostCSS http://postcss.org/
  2. 2. FrontendUnited Conference | PostCSS Ghent 2016-06-27 There’s a new library every minute (second) https://www.flickr.com/photos/ksayer/
  3. 3. FrontendUnited Conference | PostCSS Ghent 2016-06-27 PostCSS WHY? ● Fast ● Well adopted ● Modular - Just what you need ● Easy transition from SASS or …. ● Easy to extend ● The future NOW
  4. 4. FrontendUnited Conference | PostCSS Ghent 2016-06-27 FAST https://www.flickr.com/photos/sponselli/
  5. 5. FrontendUnited Conference | PostCSS Ghent 2016-06-27 It’s fast https://github.com/postcss/benchmark
  6. 6. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Well adopted https://www.flickr.com/photos/robertdouglass/
  7. 7. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Well adopted http://npm-stat.com/charts.html?package=postcss
  8. 8. FrontendUnited Conference | PostCSS Ghent 2016-06-27 autoprefixer ● So you are probably already using PostCSS without knowing it.
  9. 9. FrontendUnited Conference | PostCSS Ghent 2016-06-27 How does it work?
  10. 10. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Execution
  11. 11. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Execution var postCSS = require('postcss'); var inputCSS = '.myClass { color: red}' //your CSS var plugins = [ A, B, C, D, E, F, G, H]; postCSS(plugins) .process(inputCSS) .then(doStuff)
  12. 12. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Examples https://www.flickr.com/photos/debord/
  13. 13. FrontendUnited Conference | PostCSS Ghent 2016-06-27 PostCSS-Nested
  14. 14. FrontendUnited Conference | PostCSS Ghent 2016-06-27 CSS MQPacker
  15. 15. FrontendUnited Conference | PostCSS Ghent 2016-06-27 CSSNano
  16. 16. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Easy transition
  17. 17. FrontendUnited Conference | PostCSS Ghent 2016-06-27 From SCSS to PostCSS ●https://github.com/postcss/postcss-import ●https://github.com/postcss/postcss-simple-vars ●https://github.com/postcss/postcss-nested ●https://github.com/postcss/postcss-mixins ● You said goodbye to compass a while ago, right?
  18. 18. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Easy to extend https://www.flickr.com/photos/-imax-/
  19. 19. FrontendUnited Conference | PostCSS Ghent 2016-06-27 It’s just JavaScript https://github.com/postcss/postcss-mixins
  20. 20. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Extend - new plugin https://github.com/postcss/postcss-plugin-boilerplate
  21. 21. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Example: postcss-focus https://github.com/postcss/postcss-focus
  22. 22. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Here be dragons Nothing is stopping you to produce spaghetti. https://www.flickr.com/photos/jeremyiah/
  23. 23. FrontendUnited Conference | PostCSS Ghent 2016-06-27 handle with care
  24. 24. FrontendUnited Conference | PostCSS Ghent 2016-06-27 The future - now!
  25. 25. FrontendUnited Conference | PostCSS Ghent 2016-06-27 CSSnext
  26. 26. FrontendUnited Conference | PostCSS Ghent 2016-06-27 CSSnext http://cssnext.io/features/#custom-properties-var
  27. 27. FrontendUnited Conference | PostCSS Ghent 2016-06-27 CSS is not a programming language It really isn’t, however: calc() color() var() conditionals? :not, :matches
  28. 28. FrontendUnited Conference | PostCSS Ghent 2016-06-27 LINKS https://www.smashingmagazine.com/2015/12/introduction-to- postcss/ https://github.com/postcss/postcss https://github.com/postcss/postcss/blob/master/docs/ plugins.md http://postcss.parts/ https://github.com/wunderkraut/gulp-task-postcss
  29. 29. FrontendUnited Conference | PostCSS Ghent 2016-06-27 Andreas Sahle (@pixelmord) @wunderkraut_de https://wunder.io/de/

×