18

I am using angular material design at the moment. It does not reset the css like bootstrap. I have those whitespaces around my toolbar and edge of my browser.

I've checked some angular material design examples and some are using normalize css. Is it the right way to go with google material-design?

Reşit Körsu
  • 578
  • 3
  • 8
  • 18
  • 2
    I had the same issue and I made it by hand in styles.css file at the root of the application. example:https://github.com/noe-fc/client/blob/master/src/styles.scss#L11 – Supamiu May 16 '17 at 14:13

1 Answers1

31

Yes using normalize css is a great option. It's what bootstrap uses anyways. Use the npm install for latest version: https://github.com/necolas/normalize.css/

  1. Install the normalize.css library:

    npm install --save normalize.css

  2. Import it in your styles.css

    @import '~normalize.css';
Akora
  • 756
  • 7
  • 22
Eeks33
  • 2,245
  • 1
  • 14
  • 17
  • Hi @Eeks33 how about adding global styles for headings, p, and all the other elements material library doesn't style? Thanks – Enrique Jan 12 '18 at 19:35
  • 3
    @Enrique normalize will make the defaults of all browsers look visually the same. If you're thinking of removing styles of elements such has h and p, then you may be thinking of 'reset' which bootstrap includes on top of normalize. There is also a third tier that new bootstrap applies as well, called 'reboot' which makes the native elements look elegant. To recap: normalize (browsers look the same) -> reset (everything looks the same) -> reboot (everything looks nice). – Eeks33 Feb 22 '18 at 16:08
  • How do you actually INCLUDE it in your css though... Answer: https://stackoverflow.com/questions/38409773/ – Simon_Weaver Jun 05 '18 at 19:46