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

Front-end of Days

Front-end of Days

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

52bf56e5c8ae611d3d058fdeae6a1b92?s=128

Drew

May 19, 2016
Tweet

Transcript

  1. None
  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!
  23. None