user profile image

This pen lets you see how different CSS units convert to each other. Some of them are relative units which are based on say the viewbox or page width or height. Therefore you will see some values change when you resize the window.

I have pulled in pieces of a NPM package Units ( which also goes to become a great example of how NPM packages can be reused here in frontend.

I am not 100% satisfied about the way I pulled in the NPM, which is something which I will try to find a satisfying solution to. If you have an easy way of using NPM packages here on CodePen please share in a comment.

The styling of sliders done using range.css (


  1. very helpful, thanks

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.