Introduction to Stylus

For those who haven’t used Stylus before, it’s a chrome extension which you can get from the Chrome web store or as a Firefox add-on. (I’ve not used the Firefox version, I imagine it will be very similar to the Chrome version which I will show in this article.)

In my previous article I shared some Stylus scripts, but I didn’t explain how to use them. This article aims to provide that explanation.

Importing a script into Stylus

Once you have installed Stylus for your browser, you can use the above scripts by copying them to your clipboard, then importing them into Stylus. To do this, click on the Stylus icon and click Manage.

This opens a page which allows you to add a new style. Click the + button to do so.

The first thing to do is to name your style. This can be whatever you like, anything which will meaningfully communicate to you what this style does. You can then click the Import button to use the styles from my previous post, or any other styles which have been exported from Stylus.

The Import button will open a modal where you can paste the snippet you have previously copied. Click the Overwrite Style button, then you can Save your style.

At this point, the style should have taken effect. This is a good time to visit the page where you expect to see it in action, and confirm that everything is working as expected.