For the month of October for my course in Open-Source Development, we were instructed to take part in hacktoberfest, and thus create four pull requests throughout the month.
Since I had never contributed to the open-source community before, I decided to start with a smaller issue to improve css on a page. The page had a list of dependencies, and my goal was to make the items in the list stand out more:
It was quite easy to come up with a plan - increase the font size, change the font to be the same as the rest of the text on the page, and make the border color slightly darker.
Since this was a css change, I started by navigating to the webpage, and used developer tools to change the css. This allowed me to immediately see the result without setting up anything. Soon, I ended up with this as the updated version of the page:
Thus, I began setting up the project on my local. I forked the repo, cloned it locally, and followed the environment setup instructions provided in the repo to set up the project locally. The setup went perfectly, and I was able to find the files I needed to modify easily due to the information provided in the issue (a link to a previous issue that resulted in creation of that page). I copied over the css changes from my browser, tested that they worked on my local setup, committed the changes, and created a PR.
However, one of the project maintainers pointed out something that I found interesting - the new border style would not be applied consistently to all the elements. That is, some of the borders were rendering thicker than others. I tried to replicate this locally and found that depending on the screen size, the browser would render the width of the borders slightly differently:
I later discovered that this happens if the border width is set using pixels as the units. I converted the units into em and was able to resolve the issue. But then I found that the border style would not apply for some elements on certain versions of browsers. Though as pointed to me by the project maintainers, this was pretty easy to resolve by adding the !important rule to the new style.
Top comments (0)