Gruntin', Gulpin', or None of the Above

Transcript

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!