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

Gulp based Sass frontend workflow with Bootstrap framework and theme

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.

Mladen Đurić

May 19, 2017
Tweet

More Decks by Mladen Đurić

Other Decks in Programming

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