Brackets – A Designer-Friendly Code Editor

If you’re a designer who wants to work in a code editor rather than a WYSIWYG application like Dreamweaver or Macaw, you’ll want to give Brackets a try. I’m more of a developer than a designer, so I prefer writing code in a code editor. Coda was my favorite for years, but I switched to Sublime Text 2 when I was in a PC environment. Last year, I discovered Brackets when Adobe briefly introduced it into the Creative Cloud as Edge Code CC.

Brackets is open source. You can view the repo on Github. It’s lightweight with just the right features built in — code folding, command line integration, inline editing (just move your cursor over an id and press cmd/ctrl + E to see the CSS in an inline window), support for preprocessors (Sass and LESS), and a browser connection (similar to Codekit) that updates as you make changes for a live preview.

Designers who use Adobe’s Creative Cloud will love Adobe’s Extract for Brackets, which allows you to open a PSD in a panel in Brackets and extract assets or get code hints for colors, styles, and typography right in the editor. Try it yourself by following these steps — you’ll be hooked!

1. Download Brackets with Adobe Extract from brackets.io here.

Brackets with Adobe Extract

2. Open or create a stylesheet for a site you’re working on for which you have a design in a PSD.

3. Click on the Adobe Extract icon on the right.

Adobe Extract

4. Drag your Photoshop file into the panel at the bottom to upload it to Creative Cloud and add it to your assets. Click on its thumbnail to open it in the panel.

Add Photoshop file

5. Click on an element (like a heading). From the box that pops up, you can see its dimensions (use shift-click for measurements between objects) or copy the text to the clipboard to paste into your HTML file.

copy text

6. With an element selected, begin typing a rule in your CSS file — you’ll notice the attributes for the element you’ve selected in the PSD become available to you in the code hints box that pops up.

Extract CSS

As you start typing a rule, the attributes for the item you’ve selected in the PSD will show up in the extract pop-up. As you can see below, after I typed “font-” the font attributes were listed in the pop-up.

font properties

To extract an image, simply select it in the PSD and then begin typing the rule (or img tag in an HTML file) and click on the image in the pop-up to insert the path (the file will be saved to that location).

extract an image

This is just the beginning! The best way to learn about all the features is to jump in and start working with it. For a more detailed tutorial check out this article from Adobe.

If the built-in features aren’t enough to entice you to try Brackets, there’s also an extension manager that allows you to install whatever extensions you need. There are some excellent choices in the Brackets Extension Registry. My favorites are Brackets Snippets by Jonathan Rowny which allows you to create snippets (in a JSON file) for all your frequently used code, and WordPress Hint (code hints for WordPress functions).

This video will walk you through creating and using the Snippets extension:

For non coders, don’t let the JSON intimidate you. The n is just used for inserting a line break and the backslashes you see are for escaping characters (keeping them from being interpreted as code).

I hope this tutorial helps you get started with Brackets. When you combine Adobe’s Extract Assets with the code hints and Snippets, you get a nice workflow that both coders and designers can embrace.

2 Comments

  1. Great article, Debbie, thanks for posting it. I have been working in Sublime 3 and there is so much to learn with a new text editor. Because I am not a visual artist, I don’t start with a PSD but it is great to know about this tool. Thanks so much for writing this how-to and sharing it.

    • Thanks, Anet! Glad it was helpful.

Leave a comment