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

Amadou Sall

July 07, 2019
Tweet

More Decks by Amadou Sall

Other Decks in Programming

Transcript

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

    or Bootstrap? Stop Asking the Question! www.amadousall.com !
  2. 8

  3. 9

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

    but no browser has the same defaults. 
 —Eric Meyer 17
  5. 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
  6. 28

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

    devices
 !</div> Bootstrap utilities are responsive 35
  8. What is Angular Material? Angular components Implements Material Design Built

    by the Angular Team Released at the same time as Angular 43
  9. 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
  10. 52

  11. (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
  12. Which one to choose? Angular Material ❌ CSS Reset ❌

    CSS Layout ❌ CSS Utilities ✅ Components Bootstrap ✅ CSS Reset ✅ CSS Layout ✅ CSS Utilities ❌ Components 70
  13. 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
  14. 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
  15. 76

  16. 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
  17. 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
  18. ✅ Bootstrap Reboot ✅ Bootstrap Grid ✅ Bootstrap Utilities ✅

    Component Dev Kit ✅ Material Components ✅ New Theming approach Recap