A couple of enhancements I really like are the shortcuts to quickly jump to any file Ctrl+Shift+o (or Cmd+Shift+o). In the screen capture below, you can see many of the files in this project.
Select the file, click on it and it is immediately open for editing.
When working on a HTML file, one can use Ctrl+e (or Cmd+e) to quickly see/ edit the CSS associated with the given element. In the example below, I selected the element and then immediately saw the associated CSS (which I could edit).
The Live Preview icon is in the upper right of the interface. The first time you select it, you are informed that it will only work in Chrome. You may also receive a message that you need to restart Chrome to enable remote debugging (Brackets will do this for you).
You will only see the messages once. You can then edit your HTML and CSS and observe the effect immediately in the Chrome browser (at the present time, only Chrome is supported). Note the screen capture below (Brackets is open on the left and Chrome on the right). The arrow (on the left) indicates the line of HTML I am examining; the other (arrow on the right) shows the highlighted view in the browser.
Ok, I can do the same with developer tools (or Firebug in Firefox). But, one can then change the CSS (using the quick edit feature while working in the HTML document) and immediately observe the effect in the resulting page. The biggest issue I have with tools like Firebug is when I make several changes and then can’t save my work and have to remember what I did. The result is shown below (and the update in the browser was immediate). Yes, I know that I am graphically challenged. I just wanted to demonstrate the effect by changing the background color.
So, this is a pretty impressive editor in the basic configuration. But, one can also add extensions. I recommend examining the official Brackets extensions site at GitHub and selecting those you find useful. I have selected some (listed below). You may decide that others are more useful to your workflow. Essentially, you download the zip archive, extract the contents and place each extracted folder in the Brackets extension folder. You can use Brackets to open that folder (Help > Show Extensions folder). Keep in mind you must restart Brackets in order for these extensions to become active (Debug > Reload Brackets or F5).
The extensions I have found most useful so far include:
- BracketLESS (compiles LESS files to CSS on save)
- Can I Use (inline viewer of CanIUse.com data)
- CSSLint (JSLint pre-installed)
- Display shortcute (display Brackets shortcuts)
- Edge Web Fonts (browse free fonts from Edge Web Fonts collection)
- PhoneGap (extension for Brackets to manage PhoneGap projects)
- W3C Validator (validate your HTML code as you develop it)
- Hover preview (display preview when hovering over color, gradient or image)
Let’s examine a few of these. Probably the most useful is the Can I Use extension (which interfaces with the CanIUse.com website). Perhaps I am working with a web page and decide a border-radius effect would be appropriate. I can quickly determine if this will work in various browsers. Keep in mind you can activate most of these extensions form View on the Brackets menu. I can see at a glance there is significant support for border-radius these days.
I also find the hover preview quite useful (in case I have not properly named my images). This also works for colors and gradients (for those who can not think in hex colors or rgb values). I know. There must be a few *grin*. An example of hover preview is shown below.
W3C validation is another useful extension. It is nice to know that your web page will pass validation before deploying it on a server. In the screen capture below, I also show the extensions presently active. If you wanted to activate others, just click on them (or click again to deactivate).
Since this is a tool created b Adobe, there is tight integration with Adobe Edge Fonts (using the Edge Fonts extension). If you are working in a CSS file and begin typing the font-family declaration, you will see that you have the choice to Browse Web Fonts. (Since this is an open source tool, you can also download an extension for the Google fonts).
If you choose to browse web fonts, you will be presented with a number of choices. You can select the one you find most appropriate.
You can then click on the Web Fonts icon (in the upper right of the interface) to locate the necessary HTML code to add to your file so the font is properly loaded and available.
There are a number of additional useful extensions. I hope this weblog post gives you an incentive to download a copy and try Brackets for yourself. I am always curious if you find this information useful. I look forward to your comments below.