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

Angular Material or Bootstrap? Stop Asking the Question! @ NG-MY 2019

Angular Material or Bootstrap? Stop Asking the Question! @ NG-MY 2019

Angular Material AND Bootstrap for your next Angular application? It doesn't make sense, does it? The first time I talked to my colleagues about combining the two, they laughed at me. But now, they love the approach because it works like a charm.

In this session, we will see how we can leverage the best parts of both libraries to build beautiful, maintainable, and responsive Angular applications with very little CSS.

Link to video here: https://youtu.be/xLj1qw82oAo

A2d02e00546aaa125ffcf422681e9a0d?s=128

Amadou Sall

July 07, 2019
Tweet

Transcript

  1. @ahasall Frontend Software Engineer Amadou Sall NG-MY 2019 Angular Material

    or Bootstrap? Stop Asking the Question! www.amadousall.com !
  2. About Me 2 twitter.com/ahasall github.com/ahasall amadousall.com

  3. 3 vs

  4. The Story Behind This Talk

  5. I set out to build beautiful, responsive, and maintainable web

    applications 5
  6. December 2017:
 I was frustrated by Angular Material 6

  7. January 2018:
 The stable release of Bootstrap 4 was out

    7
  8. 8

  9. 9

  10. Hello Bootstrap Angular Material Angular Material & Bootstrap Theming, the

    Easy Way Agenda
  11. Hello Bootstrap

  12. What is Bootstrap? 12

  13. Bootstrap is built around 3 core principles of Responsive Design

    13
  14. 3 Core Principles of Responsive Design 14 Media Queries Fluid

    Layouts Mobile First
  15. The Different Parts of Bootstrap 15 Reboot Grid Components Utilities

  16. Every web application needs a CSS Reset 16

  17. What is a CSS Reset? All browsers have presentation defaults,

    but no browser has the same defaults. 
 —Eric Meyer 17
  18. CSS resets remove browser inconsistencies 18

  19. Bootstrap Reboot, a Brand New CSS Reset 19

  20. box-sizing: border-box 20 Margin Border Padding Content

  21. box-sizing: border-box 21 Margin Border Padding Content

  22. Bootstrap Grid, a Flexbox Grid System 22

  23. Containers <div class="container"> !</div> 23

  24. Rows <div class="container"> <div class="row">
 
 !</div> <div class="row">
 


    !</div> !</div> 24
  25. Columns <div class="container">
 <div class="row"> <div class="col">Row 1/Col 1!</div> <div

    class="col">Row 1/Col 2!</div> !</div>
 !</div> 25
  26. Columns <div class="container">
 <div class="row"> <div class="col-4">Row 1/Col 1!</div> <div

    class="col-8">Row 1/Col 2!</div> !</div>
 !</div> 26
  27. Columns <div class="container">
 <div class="row"> <div class="col-md-6 col-lg-4">Row 1/Col 1!</div>

    <div class="col-md-6 col-lg-4">Row 1/Col 2!</div> !!... !</div>
 !</div> 27
  28. 28

  29. Bootstrap Utilities, a Productivity Booster 29

  30. Utility Class .class {
 property: value !important;
 } a single,

    immutable property-value pairing 30
  31. Utility Class .d-!#{$value} { display: $value !important; } a single,

    immutable property-value pairing 31
  32. Utility Class .d-block {
 display: block !important;
 } a single,

    immutable property-value pairing 32
  33. Utility Class .d-flex {
 display: flex !important;
 } a single,

    immutable property-value pairing 33
  34. Bootstrap utilities are responsive 34

  35. <div class="d-none d-md-flex">
 Hidden on small devices
 Visible on bigger

    devices
 !</div> Bootstrap utilities are responsive 35
  36. Utilities Display Padding Margin Flexbox Vertical Alignment Position Sizing Text

    Visibility ... 36
  37. Utilities .pt-3, .pb-3, .py-5 37

  38. Utilities .ml-3, .ml-md-5, .mx-5 38

  39. Bootstrap Components, the Reason Why You Hate Bootstrap 39

  40. The Problem with Bootstrap 4 40

  41. ✅ CSS Reset ✅ CSS Layout ✅ CSS Utilities ❌

    Components Recap
  42. Angular Material

  43. What is Angular Material? Angular components Implements Material Design Built

    by the Angular Team Released at the same time as Angular 43
  44. The Different Parts of Angular Material 44 Component Development Kit

    Material Design Components
  45. The Different Parts of Angular Material 45 @angular/cdk @angular/material

  46. Table Stepper Tree 46 CDK

  47. Platform Overlay Layout Bidirectionality Drag & Drop ... 47 CDK

  48. CDK Layout constructor(private observer: BreakpointObserver) {
 this.breakpoint$ = this.observer.observe([
 '(min-width:

    0px)',
 '(min-width: 576px)',
 '(min-width: 768px)',
 '(min-width: 992px)',
 '(min-width: 1200px)',
 ]);
 } 48
  49. The CDK can be used to build your own component

    library 49
  50. Form controls Navigation "Layout" components Buttons & indicators Popups &

    Modals Data table 50 Components
  51. Theming Angular Material Applications 51

  52. 52

  53. My Button <button mat-raised-button color="primary"> My Button !</button>
 53

  54. My Button <button mat-raised-button color="accent"> My Button !</button>
 54

  55. This is so easy... 55

  56. ...let’s do the same for our own components 56

  57. None
  58. None
  59. (1) my-alert.component.html <div class="my-alert">
 Lorem ipsum dolor sit amet,
 consectetur

    adipisicing elit.
 !</div> 59
  60. (2) my-alert.component.scss .my-alert {
 padding: 1.5rem;
 margin: 1.5rem;
 border-width: 1px;


    border-style: solid;
 font-weight: bold;
 } 60
  61. (3) my-alert.component.theme.scss @mixin alert-theme($theme) {
 $primary: map-get($theme, primary);
 $accent: map-get($theme,

    accent);
 
 .my-alert {
 background-color: mat-color($accent, 50);
 color: mat-color($accent, 900);
 border-color: mat-color($primary, 100);
 }
 } 61
  62. (4) styles.scss @include alert-theme($my-theme); 62

  63. Angular Material is great but... 63

  64. Theming our own components can be easier 64

  65. Not many utilities
 (only typography and elevation utilities) 65

  66. No CSS layout system
 (write your own) 66

  67. No CSS reset by default
 (provide your own) 67

  68. ❌ CSS Reset ❌ CSS Layout ❌ CSS Utilities ✅

    Components Recap
  69. Angular Material & Bootstrap

  70. Which one to choose? Angular Material ❌ CSS Reset ❌

    CSS Layout ❌ CSS Utilities ✅ Components Bootstrap ✅ CSS Reset ✅ CSS Layout ✅ CSS Utilities ❌ Components 70
  71. Let’s Be Pragmatic! 71

  72. The Setup - Bootstrap @import "my-variables"; @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";


    @import "~bootstrap/scss/mixins"; 
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/grid";
 @import "~bootstrap/scss/utilities"; @import "my-reset"; 72
  73. The Setup - Angular Material @import "!~@angular/material/theming";
 @include mat-core($my-typography); $my-theme:

    mat-light-theme($primary, $accent, $warn)
 @include angular-material-theme($my-theme);
 73
  74. None
  75. Theming Angular Material, the Easy Way

  76. 76

  77. .border 77

  78. .m-5 78

  79. .p-5 79

  80. .font-weight-bold 80

  81. .my-border-primary-100 81

  82. .my-text-secondary-900 82

  83. .my-bg-secondary-50 83

  84. my-alert.component.html <div class="border m-3 p-3 font-weight-bold my-border-primary-100 my-text-secondary-900 my-bg-secondary-50 >


    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi dolore ea, earum esse
 !</div> 84
  85. Generating Custom Utilities @mixin generate-utilities($theme) { $primary: map-get($theme, primary);
 $accent:

    map-get($theme, accent);
 
 .my-text-secondary-900 {
 color: mat-color($secondary, 900);
 } .my-bg-primary-100 {
 background-color: mat-color($primary, 100);
 } !!...
 } 85
  86. The Utility-First Philosophy 86

  87. Let’s stop writing CSS... 87

  88. Let’s stop writing custom CSS... 88

  89. ...and use utilities where possible 89

  90. ✅ Bootstrap Reboot ✅ Bootstrap Grid ✅ Bootstrap Utilities ✅

    Component Dev Kit ✅ Material Components ✅ New Theming approach Recap
  91. Perceived Barriers

  92. What about separation of concerns? 92

  93. Isn't this just inline styles? 93

  94. What about maintainability? 94

  95. Angular Material is great... ...but it’s not perfect. Bootstrap can

    help! Summary
  96. @ahasall Frontend Software Engineer Amadou Sall NG-MY 2019 Thank You!

    www.amadousall.com !