Stylus Browser Add-On for CSS Development
Welcome to the first in a series of articles on help for developing themes for WA. Today I'd like to share a new to me tool that really helped me with my theme for my author world. As I was developing the CSS theme for View From the Den, my code quickly hit over two thousand lines of code. It was slowing down the little WA CSS editor so badly on my laptop I just couldn't use it anymore. The WA CSS editor is great for many things, but not what I was trying to do with a massive theme. My usual fallback, Notepad++, wasn't cutting it either, because I couldn't see what was happening real time. After some poking around, I discovered the Stylus extension/add-on. There are great coding editors and everyone has their favorite. But this one was love at first sight for me. Stylus allows you to:
Redesign your favorite websites with Stylus, an actively developed and community driven userstyles manager. Easily install custom themes from popular online repositories, or create, edit, and manage your own personalized CSS stylesheets.It's an updated version of the old extension 'Stylish' and can use that extension's library of themes on Userstyles.org.
Pluses and MinusesThe list of pros is long - so I put the pros and cons into collapsable lists, then you don't have to scroll all the way through them to see how to use Stylus.
- Allows for live previews and for the theme to be enabled and disabled as you like.
- You can have variations and version numbers - if you want to/are willing to track that.
- You can stylize Stylus itself. (I like dark backgrounds with light text so I use the 'Stylus Insomniac' theme for Stylus. And it's the coloring for the examples you will see here.)
- CSS aspects are color coded. Variables, classes, attributes, comments, functions--like var and rgba, etc all have different colors so you can easily see what is what. And if it's not the right color, you're probably missing a semi-colon.
- It has an optional CSS Lint checker. (The lint checker points out issues in your code such as unclosed brackets, missing semi-colons, and attribute options that don't match the attribute.)
- It can handle tabs, for easy code organization.
- Has a square with a sample of the color values for hex, rgb/rgba and a color picker.
- Uses a dropdown menu of the attribute options. This isn't atribute dependent, so you get the list of everything that starts with a character or series of characters. But it still helps me cut down on spelling mistakes.
- Has a good search function that highlights were the found items are in the scrollbar.
- Has a really big undo cache. (I put this to the test when I messed things up in my theme!)
- If you use an "illegal" WA character or class name such as 'container' it will work in Stylus, but not when you paste it into the WA CSS editor, save and reload.
- It doesn't version for you. In Chrome you can export your work. Otherwise you can copy your work into a text editor and save the version. (Github is great for this but that's another article for another day.)
Creating a CSS Stylesheet For Your WA Worlds
- You'll need to install Stylus. (I have links to it for Chrome and Firefox over in the blue sidebar box.)
- Click on the Stylus button in the add-ons/extentions list in your browser.
- Then click the Manage button in the dropdown menu.
- To create a new CSS sheet, click Write New Style. (I like to have the UserCSS box checked because it gives me a place to name the style and have a version number.)
- You'll have a brand spankin' new blank sheet to write your CSS in.
- Change the part after name to name the sheet for easy reference. I usually use the WA world name. Change the other sections in the comment header as you see fit. I don't usually use the part where it says "Applies to", so I delete the section that begins with -moz-document.
- Start adding your code after the '==UserStyle==' section. Or if you have code already for your world, just paste it in below the UserStyle comment.
- Hit save.
- Create a back up of your world's CSS in a text file somewhere, in case you want to roll back your changes. (Your WA notebook and Github are nice places for this)
- When you have your code ready and your page beautiful, select all your code in the Stylus editor, paste it into the WA CSS editor, and save.
Debugging with StylusStylus really has helped me speed up my coding and debugging because it makes finding my mistakes much easier! Here's several ways it can help you. It will give you a clickable list of issues. When you click on an issue, it will go to the issue and you can click on the red or yellow icon to get information. Here is what a missing semicolon looks like. A missing bracket... You can click on a bracket to verify it's got the matching bracket. They'll be highlighted. It warns you when you have duplicated properties. Also, it warns when there are attribute options that aren't correct for the attribute. And the tricky one I just found! This is how you find out you can't start a class name or selector call with a number.
Tips and Reminders
- Remember to save your work often! Browsers crash sometimes.
Where to find StylusIt's available for Chrome, Firefox and Opera.
More Help on StylusThe FAQ and more detailed how-tos are available at the Stylus wiki on Github.
For Grandmasters +
Containers and Sections are for guild members Grandmaster and above. If you're not subscribed at that level, you can upgrade your membership on your account page.
(Grandmaster icon property of World Anvil.)