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

Gulp based Sass frontend workflow with Bootstrap 4

Gulp based Sass frontend workflow with Bootstrap 4

This talk was given on WordPress Meetup in Novi Sad, Serbia on January 18, 2018.

Mladen Đurić

January 18, 2018
Tweet

More Decks by Mladen Đurić

Other Decks in Programming

Transcript

  1. DARK MATTER

    THE MISSING MASS
    AND VERY BRIEFLY SOME MUSINGS ABOUT

    SENSIBLE FRONTEND DEVELOPMENT
    Mladen Đurić
    @macmladen
    1
    9. MeetUp Novi Sad 2018

    View full-size slide

  2. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    2

    View full-size slide

  3. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    DARK MATTER
    3
    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 full-size slide

  4. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    4

    View full-size slide

  5. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    GULP BASED SASS

    FRONTEND WORKFLOW
    WITH BOOTSTRAP 4 FRAMEWORK
    5
    Mladen Đurić
    @MacMladen

    View full-size slide

  6. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    6
    MLADEN ĐURIĆ
    a.k.a MacMladen
    $ whoami
    A very boring incompetent guy

    View full-size slide

  7. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    I’m in IT since the age of mainframes, 8th year of UNIX epoch.
    7

    View full-size slide

  8. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    I started with Z80 assembly,
    8

    View full-size slide

  9. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    …went over 6502,
    9

    View full-size slide

  10. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    to 8086 (this is why Intel i7 is still called x86)
    10

    View full-size slide

  11. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    somewhere in between, there was an episode with BASIC
    but really enjoyed hard core C
    11

    View full-size slide

  12. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    I was knee deep in DTP 1990-2000
    gone to Mac in 1995 and never looked back.
    12

    View full-size slide

  13. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    13
    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 have started a Professional Development School ]{oder.

    View full-size slide

  14. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Sass
    IS SHORTHAND FOR?
    14

    View full-size slide

  15. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Sass
    15
    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 full-size slide

  16. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    – Steve Jobs,

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

    View full-size slide

  17. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    17

    View full-size slide

  18. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    INTRODUCE
    YOURSELF!
    18
    • Your OS? (Linux, Mac, Windows)
    • Your field? (Web design, Frontend, Themer)
    • Knowledge about HTML5, Sass, Gulp?

    View full-size slide

  19. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    HANDSOME IS AS
    HANDSOME DOES
    ‘All your Sass are belong to us. Lol.’
    19
    *Popular handsome rocket enthusiast

    View full-size slide

  20. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    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
    10. Resources
    20

    View full-size slide

  21. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 1.
    THE PROBLEM
    21

    View full-size slide

  22. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    THE PROBLEMS
    • Performance
    • Maintainability
    • Matching time constrain (budget)
    • Matching specification (quality)
    22

    View full-size slide

  23. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 2.
    THE SASS
    23

    View full-size slide

  24. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    THE SASS WAY
    • Variables
    • Functions
    • Mixins
    On The Sass Way™ site you can find various
    articles on Sass from basic to advanced level
    24

    View full-size slide

  25. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 3.
    THE GULP
    25

    View full-size slide

  26. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    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
    26

    View full-size slide

  27. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 4.
    THE BOOTSTRAP
    27

    View full-size slide

  28. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    BOOTSTRAP

    (CURRENT 3.3.7 NEXT: 4.0.0-BETA2)
    • Bootstrap 4 is in public alpha since August 2015
    • Bootstrap 4 is in beta now 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-sass)
    • Bootstrap 4 is Sass
    • Both Sass versions are easy to use/compile
    • Both Sass versions natively use(d) grunt but it is easy to
    switch to gulp.
    28

    View full-size slide

  29. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    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/
    • Bulma v0.6.2 https://bulma.io/
    • UIkit 3.0.0-beta38 https://getuikit.com/
    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/
    29

    View full-size slide

  30. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 5.
    THE THEME
    30

    View full-size slide

  31. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    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?
    31

    View full-size slide

  32. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 6.
    THE SOLUTION
    32

    View full-size slide

  33. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    33
    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 full-size slide

  34. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 7.
    THE PRACTICE
    34

    View full-size slide

  35. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    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
    35

    View full-size slide

  36. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 8.
    THE MYTH
    36

    View full-size slide

  37. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    NO PREJUDICE, PLEASE!
    • It does not have to be @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 to customize appearance
    — use build system to reduce unwanted components
    37

    View full-size slide

  38. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 9.
    THE CONCLUSION
    38

    View full-size slide

  39. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    YES YOU CAN!
    • Every CMS can have nice HTML output if you pay attention to it
    (customize templates)
    • 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.
    39

    View full-size slide

  40. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    40
    Q & A
    Mladen Đurić
    @MacMladen

    View full-size slide

  41. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    THANKS!
    41
    Mladen Đurić
    @MacMladen

    View full-size slide

  42. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    Chapter 10.
    THE RESOURCES
    42

    View full-size slide

  43. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    YES YOU CAN!
    • Every CMS can have nice HTML output if you pay attention to it
    (customize templates)
    • 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.
    43

    View full-size slide

  44. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    44

    View full-size slide

  45. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    45
    Professional Development School

    View full-size slide

  46. @MacMladen Bootstrap 4 using Sass, variables and gulp v.1 2018-01-18
    9. MeetUp Novi Sad 2018
    46

    View full-size slide