My personal requirements for a text editor are simple. I need to code in one window and see a live update in another. Brackets has a Live Preview feature that opens your file in to the Chrome browser. You can see the results in Chrome as you change your code. So, you won't be using the old process of edit - save - refresh browser. The instant live preview works for both the html document and the css code in the Inline Editor.
First, install Brackets
- Download and open the dmg file
- Drag the Brackets icon to your application folder
- Click on Brackets.app in the Applications folder
- Read the introduction in the default html file. It is very useful. Don't skip it.
You don't need to open and switch between your html and css files. Brackets has an Inline Editor that will display and allow you to edit the css code associated to a tag selected in the html. In this screenshot, I've selected the h1 tag. As you can see, we can edit the existing css or click the New Rule button to add a new rule to the tag. This also works with html color codes, image thumbnails, JS functions and animation.
Extensions
Brackets is written in HTML, JS and CSS. So you can get your hands dirty modifying and extending the app if you like. As with most open source projects, Brackets has a large community of users and developers. You can join in and help or just browse the list of themes and extensions that can be added to extend the Brackets features. Just click File - Extension Manager. You might want to consider the Autoprefixer extension, which adds vendor prefixes to your code.
Download Brackets
http://brackets.io/
Brackets Blog
http://blog.brackets.io/
Brackets Support
https://github.com/adobe/brackets/wiki/Troubleshooting
