Bracket For Mac

With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. Try Creative Cloud Extract (preview) for Brackets for an easy way to get clean, minimal CSS straight from a PSD with no generated code.
Why Use Brackets?
The app is a lightweight, yet powerful, modern text editor. Blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.
Get Code Hints from a PSD
The Extract for Brackets (Preview) extension lets you pull out design information from a PSD including colors, fonts, gradients, and measurement information as clean, minimal CSS via contextual code hints. You can also extract layers as images, use information from the PSD to define preprocessor variables, and easily get dimensions between objects. All in the context of your code.
Inline Editors
Instead of jumping between file tabs, the program lets you open a window into the code you care about most. Want to work on the CSS that applies to a specific ID? Put your mouse cursor on that ID, push Command / Ctrl+E and the tool will show you all the CSS selectors with that ID in an inline window so you can work on your code side-by-side without any popups.
Live Preview
Get a real-time connection to your web browser. Make changes to CSS and HTML and you'll instantly see those changes on screen. Also see where your CSS selector is being applied in the browser by simply putting your cursor on it. It's the power of a code editor with the convenience of in-browser dev tools.
Preprocessor Support
Work with preprocessors in a whole new way. We know how important preprocessors are to your workflow. That’s why its want to make the tool the best code editor for preprocessors out there. With the tool you can use Quick Edit and Live Highlight with your LESS and SCSS files which will make working with them easier than ever.
Also Available: Download Brackets for Mac

One of the roads to take in modern web development is unifying and creating connections between design and implementation. Brackets is a code editor for HTML, CSS, and JavaScript, developed by Adobe, and it tries to take that road. It offers different tools to make the process of web creation faster, and improve the conversion from the graphic editor to its interpretation in the language used.
It's an open source application that has a clear interface. It can automatically detect code to help you with the writing, indentation, and coloring to identify segments. You can organize all the elements in your project in a category tree, where the code and graphics are integrated.
One of the most interesting features it has is the dynamic preview mode, in which you can open your project on a browser and see every modification you do in the source code in real time. It's functionalities can also be expanded by using extensions from third parties. One of them, called Extract for Brackets, already comes integrated in the app, and lets you export the formatting information to a PSD file for Photoshop, even though you need to create an Adobe account to do it.