Visual Designer

Howdy, I’m Dale-Anthony, a visual designer and all-round geek working for BaseKit in Bristol, UK. I craft functional and simple experiences for web and mobile.

Sublime for Designers

Sublime for Designers

Until last year I had a bit of a reputation for switching code editors every few weeks. I'd used Coda, Espresso, Chocolat and a couple of others. They were all good, but I was never satisfied… until I used Sublime.

For a while the developer folk at my old job hassled me to try Sublime, being a typical designer I'd always dismiss it as a complicated editor with a ugly icon... but actually, after using it for a while I found it to be the best app for codey goodness. And it turns out it really isn’t that complicated to get configured.

For those of you on the fence, or for those who are just brand new to the world of Sublime I’d thought I’d throw together a little setup / config guide.

Package Control

This is where the magic happens. Package control lets you install useful customisations such as new themes and syntax highlighting options, it’s the first thing you’ll want to setup.

Once you’ve downloaded and installed Sublime open it and hit ctrl ` (control + backtick), this will open the console, in here paste and run the code from this page.

Installing new packages

Once package control is installed we can access the package manager by hitting ⌘⇧p (command + shift + p).

Essential packages

In my opinion these are the essentials and the packages I use on a daily basis:

  • SideBarEnhancements - The standard sidebar in Sublime is lacking a few key features, SideBarEnhancements fixes this problem
  • TrailingSpaces - Strips trailing whitespace from files, keeps developers happy
  • BracketHighlighter - Highlights opening / closing brackets
  • Sass - Enables syntax highlighting for Sass

Install them by opening Package Control (⌘⇧p), type install package and hit enter, now you should be able to type the names of the packages and install them.

Basic config

Now that we have a handful of packages installed we should probably configure Sublime with some sensible settings. Access your user settings with ⌘,. New settings should be added between the opening and closing brackets.

Convert tabs to spaces

Unless you want developers giving you the glare of doom I suggest you find out if they work with tabs or spaces, they'll have a pretty strong opinion on which to use. Every developer I've worked with has used spaces, to change Sublime to use spaces add:

"translate_tabs_to_spaces": true,
"tab_size": 2

Bonus guide: Make it pretty

I dislike the default Sublime interface, but luckily you can pretty it up...


Spacegray is a nice, minimal UI. From package control (⌘⇧p if you haven’t remembered it yet!) head to install package and find Theme - Spacegray and hit enter. Once it’s done installing add the following to your user config (⌘,) file:

"theme": "Spacegray Eighties.sublime-theme"

Once you’ve installed and configured the theme restart Sublime.

That icon.

There are lots of good replacement icons around, my favourite is this one by Sam Markiewicz on Dribbble.

To replace the icon right click the Sublime app in your Applications/ folder and select View Package Contents, then browse to Contents/Resources/ and drag the new icon into this directory (overwriting the existing one).

comments powered by Disqus