Customizing npmjs.com Styles

A few simple improvements to the npmjs.com package view styles

This article was originally posted on my blog. Check it out as well as my other articles!

Like most front-end developers, I use npm quite often for finding new packages or checking out documentation for packages I use. I’ve also started to publish some npm packages of my own recently giving back to the open-source community.

As I have used npm more in the past few months, a couple of the styles used on the package view page were just bugging me as they gave the page an unfinished and poorly styled look. So, with the help of the Chrome Stylus extension I was able to add a couple quick styles to get the page looking nice. The before and after of the page are shown below.

npm package view before and after adding the custom styles.

Here is the code I used for this simple style adjustment.

blockquote > p {
 margin: 5px 0 !important;
}
table {
  border-bottom: none !important;
  margin-bottom: 16px;
}