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
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
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)
Gulpin’ Pros : ● Fast ● Like, real fast ● Stream-based ● Elegant API ● Getting better Cons : ● Not as large an ecosystem http://www.gulpjs.com/ - Node.js based, npm-integration
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
Sass Frameworks (Tool Landscape?) 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, bro?
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/
Architecture, final Principles: ● KISS (Keep it simple, stupid) ● Be clear and obvious ● Consider documenting architecture ● Use common / familiar format ● Adjust per-project if needed ● Keep project overhead low