Text Editors

Programmers and web designers are right at home in text editors. We live in them for much of the time we work on our projects. For as long as design programs have been around, programmers who use them have been waiting for a feature that gives the ability to modify design elements programmatically, just like web designs are created. It’s just the way we like to work. Last week, as I was making a UI mockup in Sketch, I decided that I wasn’t going to wait any longer. I set out to make a plugin that enables you to incorporate stylesheets into your Sketch 3 workflow.

Today I’m proud to present CSSketch, an open source CSS plugin for Sketch.

Stylesheets

I wanted to be able to use complex selectors based on layer names, child layers, parent layers, etc. I knew making a custom CSS parser would be too much of an undertaking, so I outsourced it. Webkit, the same engine behind Safari and Google Chrome, brilliantly handles all the CSS rules you can think to throw at it. By integrating it into CSSketch, it let me focus on coding the rest of the plugin (which was a lot more fun than coding a CSS parser would’ve been).

Pairing your designs with stylesheets feels natural if you’ve ever dabbled with web design. The integration with Sketch is aimed at being intuitive. You only need to select your stylesheet file once per page, and after that changes are automatically detected and applied to your document.

Less

Less is a pre-processor for CSS. It lets you add variables, functions, and more to your stylesheets. It’s a great tool for those who want to take their efficiency to the next level. It was a natural fit for integrating into the plugin, and has enabled me to make many stylesheet rules that would’ve been impossible otherwise.

Here’s a small Less example, showing what it looks like to apply a shadow to a layer, but still maintain legibility for those of us who don’t have CSS’s parameter orders memorized.

Beyond Shared Styles

Shared styles are great when you need every layer to look the same. Pretty soon the limits become glaring and start holding you back. You have many text layers, and they need to be the same color as some of your shapes, so you need two types of shared styles. Some text needs be a different size, some need to be center aligned, etc. Soon your design has fragmented to the point you need a dozen shared text styles, which turns a simple palette change into a true ordeal. With CSSketch, a complete palette change can be as simple as changing one line.

A better workflow through stylesheets

Open to Suggestions

I made CSSketch open source so that anyone can modify it to their liking, or contribute to the project.

You can download it, and start using it, now at github.com/JohnCoates/CSSketch

If you liked this article I’d appreciate if you’d hit the recommend button! (The cute little heart below.)