CSSketch: CSS for Sketch 3 

More open-sourced stuff from John Coates!

Yes, this is a real thing: CSS in Sketch (From John Coates)
Yes, this is a real thing: CSS in Sketch (From John Coates)

I still haven’t made my front-end-focused website, so, in the meantime, I’ll have to share this here.


It’s a plugin for Sketch that allows users to design programmatically (you know, with CSS/Sass/Less).

Most front-end designers are `designers-first, developers second.`

So, the workflow for most web designers is as follows:

  1. Design pixel-perfect mockups in Photoshop/Illustrator/Sketch
  2. Find web developer
  3. Give pixel-perfect mockups to developer
  4. Wait.
  5. Get proposal back from web developer
    1. Designs aren’t pixel-perfect, because the web is hard
  6. Get mad. Send mockups back to developer.
  7. Hope for the best.
  8. Wait.
  9. Get discouraged. DIY next time (takes longer, but whatev’s).


There are, however, a few web designers who were `developers-first.`

Unlike the conventional designer, some web designers design—get this—right in the browser.

Their workflow is like this:

  1. Have text editor open, with necessary HTML, stylesheets, and JavaScript
  2. Have web browser open
  3. Write code in text editor
  4. Observe changes auto-refreshing in browser
  5. Done.

Put plainly, there are some web designers out there who are more comfortable with code, and less comfortable with conventional design applications.[1]

CSSKetch is for those people.

Want to apply a particular shadow, gradient, border—whatever—to more than one element in an artboard (or to an artboard itself?). It’s easy: just apply a class .class to the necessary elements.

No more copy and pasting to mimic styles.

Whenever I get around to making that design-focused website, I’ll be sure to take a good look at this plugin.

(From Sketch)

  1. And then there are some web designers who never got any formal design education, and instead learned web design from the code side of things (me!)