TheOverAnalyzed

More open-sourced stuff from John Coates!

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

CSSKetch.

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)