Upload
andreas-sahle
View
838
Download
0
Embed Size (px)
Citation preview
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/photos/ksayer/
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
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 knowing it.
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 { color: red}' //your CSS
var plugins = [ A, B, C, D, E, F, G, H];
postCSS(plugins)
.process(inputCSS)
.then(doStuff)
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
●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?
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-boilerplate
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 dragonsNothing is stopping you to produce spaghetti.
https://www.flickr.com/photos/jeremyiah/
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()
color()
var()
conditionals? :not, :matches
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
FrontendUnited Conference | PostCSS Ghent 2016-06-27
Andreas Sahle (@pixelmord) @wunderkraut_de
https://wunder.io/de/