Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS boilerplate is out of date #2867

Open
eemeli opened this issue May 29, 2023 · 6 comments
Open

CSS boilerplate is out of date #2867

eemeli opened this issue May 29, 2023 · 6 comments
Assignees
Labels
good first issue P4 We expect it to be fixed someday task

Comments

@eemeli
Copy link
Member

eemeli commented May 29, 2023

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.

@eemeli eemeli added P4 We expect it to be fixed someday good first issue labels May 29, 2023
@mathjazz mathjazz added the task label May 29, 2023
@haastrupea
Copy link

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
Copy link
Collaborator

mathjazz commented Aug 9, 2023

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

@haastrupea
Copy link

Great👍

@haastrupea
Copy link

haastrupea commented Aug 9, 2023

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

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
Copy link
Collaborator

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
Copy link

Alright. I will get started with the switching.

haastrupea added a commit to haastrupea/pontoon that referenced this issue Aug 26, 2023
The content of  content of main.css, nomalise.css, and
reset.css(modified) from the h5bp/html5-boilerplate(v8.0.0)
package to replace the content of boilerplate.css.

Outright removal of reset.css content caused visual changes in the app,
so I took the following steps to handle the situation

- I carefully observed visual changes within the app
as I remove each reset element with no visual implications

- Element used in fewer places in the app that need reseting,
I  carefully moved their reset  to where they only affect
where the elements are used

-  For elements used in too many places, I left their reset as
the content of the reset.css in boilerplate.css file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue P4 We expect it to be fixed someday task
3 participants