Stonefishy Blog - by Andrew Shi

Scribbles of a front and back ends developer

A Nice Web Design Tool - Bracket

Bracket is open source web design text editor, it focus with visual tools and preprocesssor support. It is easy to design web page in the browser, we can get the page layout in time when we change the html, css, javascript. We don’t need to save the file and refresh the browser. That’s so convenience.

Bracket supports the element highlight on the page in time when you put your mouse cursor on the specific html tag.

Absolutly, I recommend you to design you website with it. You can download it from here for Mac OS. Also you can download it for other platform from this.

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. This is very benefit for web designer which want to design web page with PSD source file.

The Bracket has three big features, they are below:

  • Inline Editor
    We don’t need to jump between file tabs when we want to change the style of the specific ID. Just put the mouse cursor on that ID and press Command/Ctrl + E, Bracket 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 browser. Make changes to CSS and HTML and you’ll instantly see those changes on the page.

  • Preprocessor Support
    With Brackets you can use Quick Edit and Live Highlight with your LESS and SCSS files which will make working with them easier than ever.

With Bracket, you can improve your working efficiency and save your time. This web design tool is so power, and the offical website is here.