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

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

Angular Material or Bootstrap? Stop Asking the Question! @ NG-DE 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.

A2d02e00546aaa125ffcf422681e9a0d?s=128

Amadou Sall

August 31, 2019
Tweet

Transcript

  1. AHASALL Frontend Software Engineer Amadou Sall NG-DE 2019 www.amadousall.com !

    Angular Material or Bootstrap? Stop Asking the Question! @ahasall
  2. AHASALL Hi, I am Amadou Sall * 2 github.com/ahasall amadousall.com

    twitter.com/ahasall
  3. AHASALL 3 vs

  4. AHASALL The Story Behind This Talk

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

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

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

    out 7
  8. AHASALL 8

  9. AHASALL 9

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

    the Easy Way Agenda
  11. AHASALL Hello Bootstrap

  12. AHASALL What is Bootstrap? 12

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

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

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

    Utilities
  16. AHASALL Every web application needs a CSS Reset 16

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

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

  19. AHASALL Bootstrap Reboot, a Brand New CSS Reset 19

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

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

  22. AHASALL Bootstrap Grid, a Flexbox Grid System 22

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

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


    
 !</div> !</div> 24
  25. AHASALL 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. AHASALL 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. AHASALL 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. AHASALL 28

  29. AHASALL Bootstrap Utilities, a Productivity Booster 29

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

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

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

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

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

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

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

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

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

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

  40. AHASALL The Problem with Bootstrap 4 40

  41. AHASALL ✅ CSS Reset ✅ CSS Layout ✅ CSS Utilities

    ❌ Components Recap
  42. AHASALL Angular Material

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

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

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

  46. AHASALL Table Stepper Tree 46 CDK

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

    CDK
  48. AHASALL 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. AHASALL CDK Drag & Drop <div>
 I want to be

    draggable
 !</div> 49
  50. AHASALL CDK Drag & Drop <div cdkDrag>
 this element is

    now draggable
 !</div> 50
  51. AHASALL The CDK can be used to build your own

    component library 51
  52. AHASALL Form controls Navigation "Layout" components Buttons & indicators Popups

    & Modals Data table 52 Components
  53. AHASALL Theming Angular Material Applications 53

  54. AHASALL 54

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

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

  57. AHASALL This is so easy... 57

  58. AHASALL ...let’s do the same for our own components 58

  59. AHASALL

  60. AHASALL

  61. AHASALL (1) my-alert.component.html <div class="my-alert">
 Lorem ipsum dolor sit amet,


    consectetur adipisicing elit.
 !</div> 61
  62. AHASALL (2) my-alert.component.scss .my-alert {
 padding: 1.5rem;
 margin: 1.5rem;
 border-width:

    1px;
 border-style: solid;
 font-weight: bold;
 } 62
  63. AHASALL (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);
 }
 } 63
  64. AHASALL (4) styles.scss @include alert-theme($my-theme); 64

  65. AHASALL Angular Material is great but... 65

  66. AHASALL Theming our own components can be easier 66

  67. AHASALL Not many utilities
 (only typography and elevation utilities) 67

  68. AHASALL No CSS layout system
 (write your own) 68

  69. AHASALL No CSS reset by default
 (provide your own) 69

  70. AHASALL ❌ CSS Reset ❌ CSS Layout ❌ CSS Utilities

    ✅ Components Recap
  71. AHASALL Angular Material & Bootstrap

  72. AHASALL Which one to choose? Angular Material ❌ CSS Reset

    ❌ CSS Layout ❌ CSS Utilities ✅ Components Bootstrap ✅ CSS Reset ✅ CSS Layout ✅ CSS Utilities ❌ Components 72
  73. AHASALL Let’s Be Pragmatic! 73

  74. AHASALL 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"; 74
  75. AHASALL 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);
 75
  76. AHASALL

  77. AHASALL Theming Angular Material, the Easy Way

  78. AHASALL 78

  79. AHASALL .border 79

  80. AHASALL .m-5 80

  81. AHASALL .p-5 81

  82. AHASALL .font-weight-bold 82

  83. AHASALL .my-border-primary-100 83

  84. AHASALL .my-text-secondary-900 84

  85. AHASALL .my-bg-secondary-50 85

  86. AHASALL 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> 86
  87. AHASALL 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);
 } !!...
 } 87
  88. AHASALL The Utility-First Philosophy 88

  89. AHASALL Let’s stop writing CSS... 89

  90. AHASALL Let’s stop writing custom CSS... 90

  91. AHASALL ...and use utilities where possible 91

  92. AHASALL ✅ Bootstrap Reboot ✅ Bootstrap Grid ✅ Bootstrap Utilities

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

  94. AHASALL What about separation of concerns? 94

  95. AHASALL Isn't this just inline styles? 95

  96. AHASALL What about maintainability? 96

  97. AHASALL Angular Material is great... ...but it’s not perfect. Bootstrap

    can help! Summary
  98. AHASALL NG-DE 2019 Thank You! @ahasall Frontend Software Engineer Amadou

    Sall www.amadousall.com !