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.
— Firefox add-on page
  It's an updated version of the old extension 'Stylish' and can use that extension's library of themes on Userstyles.org.  

Pluses and Minuses

The 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.
  Pros
    • Allows for live previews and for the theme to be enabled and disabled as you like.
      pro - live preview.png
    • You can have variations and version numbers - if you want to/are willing to track that.
      Stylus - New CSS stylesheet
    • 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.)
      pro - style Stylus.gif
    • 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.
      pro - color coding.png
    • 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.)
      pro - live preview.png
    • It can handle tabs, for easy code organization.
      pro - tab-indent.png
    • Has a square with a sample of the color values for hex, rgb/rgba and a color picker.
      pro - color boxes.png
      stylus - debug - color picker.png
    • 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.
      pro - dropdown of attribute options.png
    • Has a good search function that highlights were the found items are in the scrollbar.
      pro - search with hilight.png
    • Has a really big undo cache. (I put this to the test when I messed things up in my theme!)

 
  Cons
    • 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

  1. You'll need to install Stylus. (I have links to it for Chrome and Firefox over in the blue sidebar box.)
  2. Click on the Stylus button in the add-ons/extentions list in your browser.

    Stylus extension icon

  3. Then click the Manage button in the dropdown menu.
  4. 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.)

    Stylus - new CSS Style

  5. You'll have a brand spankin' new blank sheet to write your CSS in.

    Stylus - New CSS stylesheet

  6. 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.
  7. 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.
  8. Hit save.
  9. 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)
  10. 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 Stylus

Stylus 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.
stylus - debug - list of issues.png
  Here is what a missing semicolon looks like.
stylus - debug - missing semicolon.png
  A missing bracket...
stylus - debug - missing bracket.png
  You can click on a bracket to verify it's got the matching bracket. They'll be highlighted.
stylus - debug - bracket lilite.png
  It warns you when you have duplicated properties.
stylus - debug - dupe property.png
  Also, it warns when there are attribute options that aren't correct for the attribute.
stylus - debug - incorrect attribute.png
  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.
Class Selectors can't start with a number

 

Tips and Reminders

    • Remember to save your work often! Browsers crash sometimes.

 
If you end up using Stylus for your coding let me know your thoughts.

Where to find Stylus

It's available for Chrome, Firefox and Opera.

More Help on Stylus

The FAQ and more detailed how-tos are available at the Stylus wiki on Github.  

For Grandmasters +

Grandmaster Icon


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.)

CSS Reference


If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
 
The WA Codex is a good place to start learning about how to play in WA.
 
WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.


 

Disclaimer:

I'm not affiliated with Stylus. Just a fan who has benefited from the extension by using it for my WA worlds.


Cover image: Hacks and Help Cover by krzysztof-m

Comments

Please Login in order to comment!
Powered by World Anvil