Front-end of Days

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

Transcript

1. View Slide

2. Front End Build Process
   Front-End Stuff n’ Junk
   (also cat gifs)
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

9. Gruntin’ - Gruntfile.js
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Gulpin’ - gulpfile.js
    

    View Slide

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?
    

    View Slide

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/
    

    View Slide

15. Susy and Sass Example
    

    View Slide

16. Architecture - SMACSS
    “Don’t make me hunt through your bullshit.”
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

19. Commenting - Get wordy.
    “Save a life. Comment your bullshit.”
    

    View Slide

20. Commenting, cont
    Helpful links
    ● https://github.com/necolas/idiomatic-css#3-comments
    ● https://www.drupal.org/node/1887862
    ● http://sass-guidelin.es/#commenting
    

    View Slide

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/
    

    View Slide

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!
    

    View Slide

23. View Slide