Front-end of Days

A presentation of Chapter Three's front-end process when it comes to building awesome Drupal sites

Transcript

2. Front End Build Process Front-End Stuff n’ Junk (also cat gifs)
3. Who the Hell? SpeakerDeck: http://bit.ly/1H5u3Pc Drew Bolles @bollskis Scooby Doo, Nirvana Casey Wight @cwightrun Train-tracks Villain, Old-timey Weight Lifter
4. Overview We’ll be covering our front-end build process, and the current front-end tools and technologies. 1. Build Tools 2. Preprocessors 3. Frameworks 4. Asset architecture 5. Commenting
5. 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
6. 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
7. Gruntin’ http://www.gruntjs.com/ - 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
8. 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)
9. Gruntin’ - Gruntfile.js
10. 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
11. 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
12. Gulpin’ - gulpfile.js
13. 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?
14. 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/
15. Susy and Sass Example
16. Architecture - SMACSS “Don’t make me hunt through your bullshit.”
17. Architecture, cont SMACSS Basics: • First off - Acquire (free or purchase) SMACSS. • 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)
18. 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
19. Commenting - Get wordy. “Save a life. Comment your bullshit.”
20. Commenting, cont Helpful links • https://github.com/necolas/idiomatic-css#3-comments • https://www.drupal.org/node/1887862 • http://sass-guidelin.es/#commenting
21. 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/
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!