Adobe Brackets


I’m in love with Adobe Brackets for web coding! The fact that you can have your HTML and CSS up side-by-side makes me smile! I’m still working on a way to get more than two columns. I admit, I like that Sublime Text allows you to have up to 4 different windows open at the same time.

Below you’ll find a list of some of my favorite Adobe Brackets Add-Ons! I’d love to hear what your favorite add-ons or themes would be by replying to this post!

Waka Time
Automatic time tracking and analytics about your programming.
More info…
Brackets Css Color Preview
preview the colors within css file
More info…
Brackets Trello
NeoBrackets Working Group
Sync tasks with Trello
Translated into 3 languages, including yours
Konstantin Kobs
Show colors you used in your CSS file before as code hints.
More info…
Directory Search
Louie Almeda
Search files within your project directory in an intuitive and simple way.
More info…
Sergey Chikuyonok
High-speed HTML and CSS workflow
More info…
Jean Spiteri
Export a file or a selection to PDF.
More info…
Extract for Brackets (Preview)
Preview of Extract functionality inside Brackets. Extract design information and assets from a design comp via contextual code hints for CSS.
More info…
HTML Skeleton
Easily insert a variety of HTML elements into your document.
More info…
HTML Wrapper
Format <ul>, <ol>, <nav>, <select> and <tr> children tags with a single command. NOW with live demo.
More info…
Indent Guides
Lance Campbell
Show indent guides in the code editor.
More info…
Insert Copyright
Joe Ireland
A Brackets extension to insert a copyright notice at the top of your documents (Hotkey: Alt+C)
More info…
Lorem Ipsum
Lance Campbell
Generates Lorem Ipsum text automatically in any Brackets document.
More info…
Lorem Pixel
Alex Bardanov
Generate placeholder Images for every case
More info…
Senko Anton
The minimap shows a smaller version of your code at the right of the screen. It can be used to quickly scroll to a certain part of your file. This is a fork of brackets-wdminimap by Brian Adams
More info…
New Html5 Document
Yasin Kuyu
Brackets New Html5 document
More info…
Quick multi-cursor selection
Louie Almeda
Sublime’s quick text selection of next matching text (ctrl + D) implemented in brackets
More info…
Replace In Selection
This extension allows you to do a find and replace all within selected text. Shortcut is Ctrl-R
Simple To-Do
Oleg Koshelnikov
Simple to-do list for Brackets. Tasks can be stored in text files or Trello.
More info…
Jochen Hagentröm
Spell checking the Adobe Brackets Web Editor.
More info…
Mikael Jorhult
Display all TODO comments in current document or project.
More info…
Raymond Camden
Adds W3C validation support to Brackets.
More info…
Zoom wheel
Denis Gorin
Increase / Decrease Font Size with the Mouse Wheel
More info…

#AdobeGenPro – App Development

Adobe Gen Pro - App

Adobe offers wonderful professional development opportunities via their Adobe Education Exchange! I’ve had to ability to take a number of amazing courses! Last year I started the App Development course but was unable to finish due to scheduling. Luckily, Adobe is now offering the course again!

We are learning how to create apps by writing HTML / CSS / JavaScript coding using a program called Brackets. (Brackets is a FREE coding program by Adobe. If you get a chance you should really take time and check it out. Download it here.) After we write our “app” using code we when send it to PhoneGap. (PhoneGap is another FREE program by Adobe! You can download it here.)

Watch a quick overview of Adobe Brackets

Watch a quick preview of Adobe PhoneGap

If you are interested in creating apps, I would take time and explore the possibilities of Brackets and PhoneGap. You might exactly what you need!

How do I clean up my workspace in my Adobe Software?

What happened to my workspace in Adobe?! I CAN’T find anything!!!!

Screen Shot 2014-10-14 at 6.27.22 PM

Over the years I’ve had people contact me because their workspace in their Adobe software has been moved around, deleted, modified, etc. As you can guess, the question is always the same, “how do I change everything back to the way that it used to be”. Of course, Adobe makes this a very simple task. In the upper right corner, next to the help/search area, you’ll notice a drop down with your title of your current workspace.

workspaceYou’ll notice in my visual example that my current workspace I am in is called “Kimberly’s Workspace”. I personally like to make my own custom workspace. I arrange my panels and tools in a way that speeds up my workflow on different types of tasks. Currently you might be using the “Essentials” workshops, which is typically set as your default. If you have not explored the different workspaces available in the software you might wan to take a moment and see what they have to offer or you can always create your own if you like. The task is simple, arrange your panels and tools the way that you like them and the click on the workspace drop down and then click “New Workspace”. Simple right?! Back to the task at hand, how do you fix your workspace back to the way that you like it? Again, the answer is simple, click on the workspace drop down and then click “Reset *(name of your workspace you want to set it back to)*” and that is it.  Enjoy your nice and clean workspace!

reset workspace


* Please note that the visuals I’m using are for Adobe Illustrator CC 2014 but it should look similar in your version / software.