Gulp based Sass frontend workflow with Bootstrap framework and theme

This talk was given for DrupalHeart Camp in Zagreb, Croatia on May 19, 2017.

It is almost amazing that I still see a lot of frontend developers still holding out on Sass or even holding on to Ruby/Gem versions of Sass preprocessor. Even those who reluctantly made a switch to modern gulp based Sass, use some very basic task functions, usually without understanding what is there also available.

The mission of this track will not be to teach you how to use Bootstrap as base theme, it will be first about setting up healthy directory structure and workflow for frontend development, then to learn about some useful tasks that are available to you with modern gulp plugins and lastly, how to put Bootstrap on diet and use only those parts that you actually need or make you own class names with Bootstrap mixins.

Transcript

1. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 1
   May 19-21, 2017 @ srce, Zagreb, Croatia
   GULP BASED SASS FRONTEND WORKFLOW
   

   View Slide

2. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
   DARK MATTER:

   THE MISSING MASS
   AND VERY BRIEFLY SOME MUSINGS ABOUT

   SENSIBLE FRONTEND DEVELOPMENT
   Mladen Đurić
   @MacMladen
   2
   

   View Slide

3. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 3
   

   View Slide

4. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
   DARK MATTER
   4
   The standard model of cosmology indicates that the total mass–energy of the
   universe contains 4.9% ordinary matter, 26.8% dark matter and 68.3% dark
   energy. Thus, dark matter constitutes 84.5% of total mass, while dark energy
   plus dark matter constitute 95.1% of total mass–energy content. The great
   majority of ordinary matter in the
   universe is also unseen, since visible
   stars and gas inside galaxies and
   clusters account for less than 10% of the
   ordinary matter contribution to the
   mass-energy density of the universe.
   The most widely accepted hypothesis on
   the form for dark matter is that it is
   composed of weakly interacting massive
   particles (WIMPs) that interact only
   through gravity and the weak force.
   

   View Slide

5. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 5
   

   View Slide

6. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
   GULP BASED SASS

   FRONTEND WORKFLOW
   WITH BOOTSTRAP FRAMEWORK AND THEME
   6
   Mladen Đurić
   @MacMladen
   

   View Slide

7. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 7
   MLADEN ĐURIĆ
   a.k.a MacMladen
   $ whoami
   A very boring incompetent guy
   

   View Slide

8. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
   I’m in IT since the age of mainframes, 8th year of UNIX epoch.
   8
   

   View Slide

9. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
   I started with Z80 assembly,
   9
   

   View Slide

10. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    …went over 6502,
    10
    

    View Slide

11. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    to 8086 (this is why Intel i7 is still called x86)
    11
    

    View Slide

12. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    somewhere in between, there was an episode with BASIC
    but really enjoyed hard core C
    12
    

    View Slide

13. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    I was knee deep in DTP 1990-2000
    gone to Mac in 1995 and never looked back.
    13
    

    View Slide

14. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    In 2005 I started playing with various web technologies tried
    WordPress but figured out it was (and still is) not flexible enough.
    So in 2007 I landed on Drupal
    14
    

    View Slide

15. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 15
    As soon as I started learning to code I was so fascinated and wanted to
    share what I learned. I was hardly into secondary school when I organized
    first computer club and gave first BASIC course. It was around 1982.
    In 2017 I am starting a Professional Web Development School ]{oder.
    

    View Slide

16. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Sass
    IS SHORTHAND FOR?
    16
    

    View Slide

17. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Sass
    17
    Syntactically Awesome Style Sheets
    Sass is a scripting language that is interpreted into Cascading Style Sheets
    (CSS). SassScript is the scripting language itself. Sass consists of two
    syntaxes. The original syntax, called the indented syntax, uses a syntax
    similar to Haml. It uses indentation to separate code blocks and newline
    characters to separate rules. The newer syntax, SCSS, uses block
    formatting like that of CSS. It uses braces to denote code blocks and
    semicolons to separate lines within a block. The indented syntax and SCSS
    files are traditionally given the extensions .sass and .scss, respectively.
    

    View Slide

18. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    – Steve Jobs,

    Stanford, June 12, 2005
    “Stay hungry.
    Stay foolish.”
    18
    

    View Slide

19. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 19
    

    View Slide

20. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    INTRODUCE
    YOURSELF!
    20
    • Your OS? (Linux, Mac, Windows)
    • Your field? (Web design, Frontend, Themer)
    • Knowledge about HTML5, Sass, Gulp?
    

    View Slide

21. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    HANDSOME IS AS
    HANDSOME DOES
    ‘All your Sass are belong to us. Lol.’
    21
    *Popular handsome rocket enthusiast
    

    View Slide

22. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    TIMETABLE:
    1. The Problem ~10 min
    2. The Sass ~10 min
    3. The Gulp ~10 min
    4. The Bootstrap ~10 min
    5. The Theme ~10 min
    6. The Solution ~10 min
    7. The Practice ~10 min
    8. The Myth ~10 min
    9. Q & A: 10 min or more
    22
    

    View Slide

23. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 0.
    THE APOLOGY
    23
    

    View Slide

24. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 24
    

    View Slide

25. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 1.
    THE PROBLEM
    25
    

    View Slide

26. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    THE PROBLEMS
    • Performance
    • Maintainability
    • Matching time constrain
    • Matching specification (quality)
    26
    

    View Slide

27. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 2.
    THE SASS
    27
    

    View Slide

28. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    THE SASS WAY
    • Variables
    • Functions
    • Mixins
    28
    

    View Slide

29. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 3.
    THE GULP
    29
    

    View Slide

30. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    TASK RUNNERS (NODEJS)
    • gulp (code over configuration)
    • grunt (configuration over code)
    > Grunt’s tasks are configured in a configuration object inside the
    Gruntfile, while Gulp’s are coded using a Node style syntax in
    gulpfile.js.
    • npm (native node task runner)
    • Plug-ins for tasks
    — Compiling
    — Optimizing
    — Linters
    — PostCSS
    30
    

    View Slide

31. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 4.
    THE BOOTSTRAP
    31
    

    View Slide

32. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    BOOTSTRAP

    (CURRENT 3.3.7 NEXT: 4.0.0-ALPHA6)
    • Bootstrap 4 is in public alpha since August 2015
    • Bootstrap 4 next version will be beta so features should be
    more or less stable and safe for implementation
    • Bootstrap 3 main version is written in LESS but there is also
    official Sass version
    • Bootstrap 4 is Sass
    • Both Sass versions are easy to use/compile
    • Both Sass versions natively use grunt but it is easy to switch
    to gulp.
    32
    

    View Slide

33. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    OTHER FRAMEWORKS
    • Foundation 6 http://foundation.zurb.com/
    • Bourbon 4.3.4. (5.0.0.beta.7) http://bourbon.io/
    • Material design lite 1.3.0 https://getmdl.io/
    Not full frameworks, just layout
    • Susy 1.0.9 (2.0.0.alpha4) http://susy.oddbird.net/
    • Singularity (R.I.P.) 1.8.0 https://github.com/at-import/Singularity
    • Zen grids 2.0.2 (probably R.I.P.) http://zengrids.com/
    33
    

    View Slide

34. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 5.
    THE THEME
    34
    

    View Slide

35. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    CUSTOM THEME
    • You can (should?) always go custom
    • It is relatively easy and often sensible approach especially for senior,
    opinionated fronted developers, experienced ,with or specific workflow
    • Base themes usually are nice to start but hard to fit custom design
    which is not based on framework.
    DRAWBACKS:
    • Not rarely, it is reinventing the wheel
    • Without developed system it can take more time than relying on some
    base theme
    • Budget — is the client ready to pay for development and maintaining?
    35
    

    View Slide

36. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    BOOTSTRAP (THEME)
    • The most popular base theme. Period.
    • By default use full framework 3.3.7
    (not optimal), CDN driven.
    • A lot out of the box.
    Drawbacks
    • Very specific, opinionated.
    • Not very friendly developer (Mark
    Carver)
    • Semi frontend developer friendly (you
    can and should use Sass starterkit,
    adjust variables and compile yourself)
    36
    

    View Slide

37. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    RADIX
    • Probably the most advanced bootstrap
    based base theme.
    • Very popular to use with Panopoly
    • By default use full framework 3.3.7.
    • Not to much out of the box.
    Drawbacks
    • Learning bar is higher
    • Experienced and friendly developer
    arshadcn (Arshad Chummun)
    • Frontend developer friendly (you are
    supposed to use Sass starterkit, adjust
    variables and compile yourself)
    37
    

    View Slide

38. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    TWEME
    38
    • Ultra lightweight Bootstrap
    4 theme for Drupal 8.
    • Based on Bootstrap theme
    Drawbacks
    • Based on Bootstrap theme
    • NOT Frontend developer
    friendly out of the box (no
    compiling options)
    

    View Slide

39. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    BARRIO
    39
    • Based on latest Bootstrap 4
    alpha 6
    • Use Bootstrap Library Module
    or just configure CDN loading
    on theme's administrator.
    Drawbacks
    • Learning bar is higher
    • NOT Frontend developer
    friendly out of the box (no
    compiling options)
    

    View Slide

40. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 6.
    THE SOLUTION
    40
    

    View Slide

41. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 41
    CUSTOMIZE!
    • You can use Bootstrap variables to greatly customize appearance
    but only if you build library itself
    • Try mixin based approach and build JS only for components that
    you actually use
    • Use semantic (your own classes) that are built with mixins
    • Try including mixins from different libraries to tailor your best
    mix
    • Learn from framework mixin usage on how to use them for your
    own classes and to learn about good mixin writing approach
    

    View Slide

42. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    MCI-DRUPAL
    42
    

    View Slide

43. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 7.
    THE PRACTICE
    43
    

    View Slide

44. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    PRACTICE MAKES PERFECT
    • Don’t be afraid to check & learn
    • Be open in trying different frameworks and
    approaches
    • Define your own coding standards, style and practice
    • Using (some or none) framework is one thing.
    Optimizing output is another (the gulp system)
    • Build experimental theme and practice various aspects
    44
    

    View Slide

45. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 8.
    THE MYTH
    45
    

    View Slide

46. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    NO PREJUDICE, PLEASE!
    • It does not have to fat! (it is actually up to you)
    • There is no one size fits all (if it does then it is sloppy for
    everyone)
    • Bootstrap is not the best but also not the worst.
    • You do not have to include everything:
    — use variables
    — use build system
    46
    

    View Slide

47. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    Chapter 9.
    THE CONCLUSION
    47
    

    View Slide

48. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    YES YOU CAN!
    • Even Drupal 7 can have nice HTML output if you pay attention to it
    (customize templates)
    • Drupal 8 leaves you with even less excuse not to do so
    • Optimization of the frontend should not be negotiable! Strive for:
    — lean, semantic HTML 5
    — use precache and other magic
    — learn and explore progressive web application approach to have
    pages precached and shown offline: Addy Osmani is your man.
    48
    

    View Slide

49. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    THE NEXT STEP — COMPONENTS
    49
    

    View Slide

50. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19
    THANKS!
    50
    Mladen Đurić
    @MacMladen
    

    View Slide

51. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 51
    Q & A
    Mladen Đurić
    @MacMladen
    

    View Slide

52. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 52
    

    View Slide