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. Front End Build Process
    Front-End Stuff n’ Junk
    (also cat gifs)

    View full-size slide

  2. 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 full-size slide

  3. 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 full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. Gruntin’ - Gruntfile.js

    View full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. Gulpin’ - gulpfile.js

    View full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. Susy and Sass Example

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. 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 full-size slide