CSS Tooling

BULK UP YOUR APPS FOR PRODUCTION

University CSS

BUilding for production

What is a build system?

  • Automates repetitive tasks
  • AKA task runners
    • grunt
    • gulp
    • etc
  • Great for development
  • Great for production

During my demo I'll run two commands

  • gulp serve
    • should be fast
    • should make developer's life easier
  • gulp build
    • ok if its slow
    • prepares app for production

Today we will focus more on gulp build

Demo #0

Prefixer

what does prefixer do?

  • Adds browser prefixes so you don't have to
  • No more -moz, -webkit, etc

Demo!

DEmo #1

uncss

What is uncss?

  • Removes unused CSS code
  • Great when using CSS Frameworks

Demo!

Demo #2

Screenshots

What do you mean by screenshots?

  • All screen sizes at a glance
  • Easier to spot mistakes

Demo!

Demo #3

image-diff

The heck do you mean by image-diff?

  • Helps with the struggle between
    designers and developers
     
  • What if you had a metric on how similar
    a webpage is to a PSD file?

Demo!

There are a ton of plugins out there... use them!

Production CSS

By Sergio Cruz

Production CSS

Some suggestions on how to make your production CSS top-notch

  • 1,193