CSS boilerplate is out of date

[eemeli]

As identified in #2864, our CSS boilerplate is originally from h5bp/html5-boilerplate, but has not been kept updated with the upstream.

It would be good to review the changes that have been applied in the last decade or so, and apply them here.

[haastrupea]

Hi @mathjazz , I am new here. I recently came across Pontoon on OpenSauced. I am done setting up the project on my local machine and I would love to work on this issue as my first of many here.

[mathjazz]

Hi @haastrupea! Happy to hear you'd like to contribute and I'm assigning the issue to you!

[haastrupea]

Great👍

[haastrupea]

I have a question @eemeli and @mathjazz how did you guys find out that the boilerplate.css was from h5bp/html5-boilerplate library?

I have compared the lib older version from around the same time @adngdb made this file, they seem different. I believe he curated the reset, font normalization, and base styling from different sources which he mentioned

• Reset - is from html5doctor.com/html-5-reset-stylesheet/ ( no changes since 2009)
• Font normalization - is from https://github.com/yui/yui3/blob/master/build/cssfonts/cssfonts.css (no change since 2014)
• base styles - came from various sources ( multiple sources which I doubt have changed since the creation of the boilerplate.css)

Most of these sources have not changed in recent times (I have not noticed any changes, at least for now)

My Suggestions

• Use h5bp/html5-boilerplate if I am going to introduce changes from the h5bp/html5-boilerplate it's either

  • going to be a complete replacement for what is there at the moment
  • try to bring it in incrementally starting with the reset so as to allow for testing effectively across various platforms

• Close this issue We could just close the issue and continue to apply fixes as issues are discovered, more like the way @eemeli Dropped the zoom:1 rule to fix the browser deprecation warning

[mathjazz]

how did you guys find out that the boilerplate.css was from h5bp/html5-boilerplate library?

That's what the comment in the header says: https://github.com/eemeli/pontoon/blob/55ab3c581224accd575d3802e6e557a037129a46/pontoon/base/static/css/boilerplate.css#L2C3-L2C22

It's possible that the GitHub repo of the library didn't even exist when we started using it. Adrian might have took the code from some other place in our codebase.

I'm in favour of switching to h5bp/html5-boilerplate as you propose.

[haastrupea]

Alright. I will get started with the switching.