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

Front-end of Days

Drew
May 19, 2016

Front-end of Days

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

Drew

May 19, 2016
Tweet

More Decks by Drew

Other Decks in Programming

Transcript

  1. Who the Hell? SpeakerDeck: http://bit.ly/1H5u3Pc Drew Bolles @bollskis Scooby Doo,

    Nirvana Casey Wight @cwightrun Train-tracks Villain, Old-timey Weight Lifter
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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)
  7. 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
  8. 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
  9. 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?
  10. 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/
  11. 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)
  12. 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
  13. 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/
  14. 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!