Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gruntin', Gulpin', or None of the Above

14826bb329672803131cdacaaad127e9?s=47 cwightrun
April 11, 2015

Gruntin', Gulpin', or None of the Above



April 11, 2015


  1. Front End Build Process Gruntin’, Gulpin’ or none of the

    above (also cat gifs)
  2. Who the Hell? Drew Bolles @bollskis Scooby Doo, Nirvana Casey

    Wight @cwightrun Victorian Era, Tombstone
  3. Overview We’ll be covering our front-end build process, and the

    current front-end tools and technologies. 1. Build Tools 2. Less vs Sass (Fight Club) 3. Frameworks 4. Asset architecture 5. Commenting
  4. Build Tool • What are they? Basically, a task-runner to

    compile and spit out theme- assets. Typically Node.js-based and require some command-line knowledge (very little). Gulp.js Grunt.js Broccoli.js
  5. Typically each build tool has it’s own controller file, and

    it’s own installer file, depending on how you’ve installed it’s associated modules. The two we’re covering use Node.js. Build Tool cont. Grunt.js • gruntfile.js • package.json Gulp.js • gulpfile.js • package.json
  6. Gruntin’ http://www.grunt.js/ - Node.js based, npm-integration Pros : • Huge

    ecosystem • Minimal barrier to entry • (fairly) Well-established ◦ Solid error reporting Cons : • Slow • Originally intended for small projects • Possibly over-extended
  7. Gruntin’ - Steps 1. Install the CLI (globally) 2. Install

    grunt locally to your theme 3. Install any related modules 4. Create Gruntfile.js (next slide) 5. Run grunt via terminal (or other CLI)
  8. Gruntin’ - Gruntfile.js

  9. Gulpin’ Pros : • Fast • Like, real fast •

    Stream-based • Elegant API • Getting better Cons : • Not as large an ecosystem http://www.gulp.js/ - Node.js based, npm-integration
  10. 1. Install the CLI (globally) 2. Install grunt locally to

    your theme 3. Install any related modules 4. Create gulpfile.js (next slide) 5. Run gulp via terminal (or other CLI) Gulpin’ - Steps
  11. Gulpin’ - gulpfile.js

  12. Sass Frameworks We front-enders wanted to narrow the framework bloat.

    A rigorous game of Goldilocks ensued... • Bootstrap Bloated, too specific. • Compass Too much overhead, not enough flexibility. • Singularity Promising, but ultimately based on Susy. • Susy Do you even math?
  13. Susy - Your layout, their math. http://susy.oddbird.net/ 1. Why Susy?

    a. Traditionals - bulky, lots of pre-defined classes (row, col, etc) b. Susy is grid-agnostic, set of layout tools c. Utilizes several layout techniques (float, isolation) 2. Demo - http://codepen.io/bollskis/full/bNPaqO/ 3. Docs - http://susydocs.oddbird.net/en/latest/
  14. Susy and Sass Example

  15. Architecture - SMACSS “Don’t make me hunt through your bullshit.”

  16. Architecture, cont SMACSS Basics: • First off - Buy SMACSS,

    worth!! • https://smacss.com/book/categorizing Tuned for Drupal: • Vendor - Any external Sass libraries (Susy, Sass MQ, etc) • Base - Baseline styles (base elements, resets, fonts, typography, etc) • Layout - Layout styles (Content & Sidebar, navigation, global layout elements) • Components - Isolated component (block, module, etc) styles. • Pages - Page specific styles (front, about, contact)
  17. Architecture, final Principles: • KISS (Keep it simple, stupid) •

    Be clear and obvious • Document architecture • Use common / familiar format • Adjust per-project if needed • Keep project overhead low
  18. Commenting - Get wordy. “Save a life. Comment your bullshit.”

  19. Commenting, cont Helpful links • https://github.com/necolas/idiomatic-css#3-comments • https://www.drupal.org/node/1887862 • http://sass-guidelin.es/#commenting

  20. Our Workflow • Sass - Obvi, bro. cdpn.io/bNPaqO • SMACSS

    - Everything in it’s place. • gulp.js - Did we mention it’s fast? • Susy - Your layout, their math. • Comment comment comment. • Others ◦ sass-mq - http://sass-mq.github.io/ ◦ SassDocs - http://sassdoc.com/
  21. Experimental: Drupal as a Build Tool Both LibSass and Autoprefixer

    have PHP wrappers, meaning we can integrate them as Drupal modules into our projects, eliminating the need to run these things from the command line. As long as the server processing the PHP can handle the tasks, we would be able to run our build processes on page refresh. • https://www.drupal.org/project/imageapi_optimize • https://www.drupal.org/project/advagg • https://www.drupal.org/project/entitycache • https://www.drupal.org/project/boost
  22. More links • D.o CSS coding standards - https://www.drupal.org/node/1886770 •

    Idiomatic CSS - https://github.com/necolas/idiomatic-css • SMACSS - https://smacss.com/ • Stubbornella - http://www.stubbornella.org/content/ • Complete Susy Tutorial - http://www.zell-weekeat.com/a-complete-tutorial-to-susy/ • Easy Susy Web Layouts - https://css-tricks.com/build-web-layouts-easily-susy/ • Sass Docs - http://sassdoc.com/ See us? Come say hello!
  23. None