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. 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