PostCSS: A dumb name for an awesome thing

PostCSS

A dumb name for an awesome thing.

by Miles Rauschhttp://milesrausch.com

Hyperlinks

Slides

 Demo

https://slides.com/awayken/2016devobjectivehttps://slides.com/awayken/2016devobjective/live

https://github.com/awayken/2016devobjective

Hi. I'm Miles.

@awayken milesrausch.com

Let's talk about CSS

Not quite recognizable

Not quite consistent

Let's talk about preprocessors

Sass/SCSS

http://sass-lang.com/

LESS

http://lesscss.org/

Stylus

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

Preprocessor problems

Introducing: PostCSS

PostCSS is a dumb name

It's an engine

for plugins to transform

into almost anything.

Save effortAutoprefixer ( )cssnano ( )

Enforce standardscssnext ( )stylelint ( )

Have funCanadian Stylesheets ( )Instagram ( )

Browse plugins at 

GitHubGitHub

GitHubGitHub

GitHubGitHubhttp://postcss.parts/

Demo time.Let's start here:

You'll need .https://github.com/awayken/2016devobjective

NodeJS and npm

#1.0.0

Our original project

#1.0.1

PostCSS: https://github.com/postcss/postcss#usage

#1.0.2

Stylelint

Autoprefixer

cssnano

http://stylelint.io/

https://github.com/postcss/autoprefixer

http://cssnano.co/

#1.1.0

Font Magician:

postcss-import:

cssnext:

https://github.com/jonathantneal/postcss-font-magician

https://github.com/postcss/postcss-import

http://cssnext.io/

#2.0.0

Updated for dev.Objective() 2016

#2.1.1

postcss-placehold: https://github.com/awayken/postcss-placehold

The End

Slides

Demo

https://slides.com/awayken/2016devobjective

https://github.com/awayken/2016devobjective