

(This article assumes that you’re somewhat familiar with CSS. I’ll tell you about my favorite features and how they help me as a designer. Even if your HTML/CSS is pretty basic, there’s something for you here. While they may look like developer tools, preprocessors are a fabulous addition to a designer’s workflow. Many developer tools are overkill for designers, not to mention their documentation assumes a lot of prior knowledge and a high level of server access. No wonder – with all the frameworks and libraries available, it’s hard to know where to start. A lot of designers I know – good ones! – have a solid basic understanding of HTML and CSS, but are cautious and awkward around improving their workflow. Lots of articles about preprocessors target developers, but this one goes out to UX and UI designers.

Preprocessors are the missing ingredient in your HTML/CSS workflow.
#Setup codekit with text editor code
How else could we round those corners or drop those shadows? Writing code to style a website does not have to be (quite) this tedious. Reading CSS is a real workout for your scrollbar and your patience. Writing CSS by hand, as many designers do, is an exercise in repetition. I once hand-wrote over 300 lines of CSS to style one lousy navbar, and I know I'm not alone. I am here to repair your relationship with it by introducing you to your new secret weapon.
