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
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
3. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 3
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.
5. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 5
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
7. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 7 MLADEN ĐURIĆ a.k.a MacMladen $ whoami A very boring incompetent guy
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
9. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 I started with Z80 assembly, 9
10. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 …went over 6502, 10
11. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 to 8086 (this is why Intel i7 is still called x86) 11
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
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
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
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.
16. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Sass IS SHORTHAND FOR? 16
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.
18. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 – Steve Jobs,
 Stanford, June 12, 2005 “Stay hungry. Stay foolish.” 18
19. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 19
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?
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
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
23. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 0. THE APOLOGY 23
24. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 24
25. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 1. THE PROBLEM 25
26. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 THE PROBLEMS • Performance • Maintainability • Matching time constrain • Matching specification (quality) 26
27. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 2. THE SASS 27
28. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 THE SASS WAY • Variables • Functions • Mixins 28
29. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 3. THE GULP 29
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
31. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 4. THE BOOTSTRAP 31
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
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
34. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 5. THE THEME 34
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
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
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
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)
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)
40. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 6. THE SOLUTION 40
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
42. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 MCI-DRUPAL 42
43. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 7. THE PRACTICE 43
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
45. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 8. THE MYTH 45
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
47. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 Chapter 9. THE CONCLUSION 47
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 <meta> magic — learn and explore progressive web application approach to have pages precached and shown offline: Addy Osmani is your man. 48
49. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 THE NEXT STEP — COMPONENTS 49
50. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 THANKS! 50 Mladen Đurić @MacMladen
51. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 51 Q & A Mladen Đurić @MacMladen
52. @MacMladen Docker Driver Drupal Development™ v.5 2017-05-19 52