Tools for Designing in the Browser

This post is intended to be a regularly updated list of tools, articles, and other goodies that help make designing in the browser both easier and more efficient. If you're currently a designer-developer hopefully you might learn something new of use, while if you're new to the game hopefully this will get you started off in the right direction. Tools that I currently use are marked with an (*), while others I have used in the past.

Have something you use that think should be here? Email me with a link at rob at atomidesign.com, and I'll be sure to check it out.

Last updated: June 12, 2014

Articles

• 5 Good Reasons Why Designers Should Code by Team Treehouse
• Designing With Code by Jeremy Bell @ Teehan + Lax
• Designers Will Code by David Cole @ Quora
• The Great Value of the Designer Who Codes by Garry Tan

Browser Inspectors

• Firebug
• Chrome Dev Tools *

CSS Preprocessors

• Sass + Compass *
• LESS
• Stylus
• Myth

Version Control

• Git *
• Subversion

Full Frontend Frameworks

• Twitter Bootstrap
• Zurb Foundation

Grid Systems

• Semantic Grid System *
• Unsemantic

Templating Languages

• Handlebars *
• Mustache
• HAML - Haml is mostly used in Ruby on Rails projects, but serves as a good example for an indentation-based language.

Development Tools

• MAMP *
• LiveReload
• CSSRefresh
• Grunt *
• Gulp
• Codekit
• Faker.js
• Lorem Pixel *

Static Site Generators

• Jekyll
• Octopress
• Middleman

Organized Development Approaches

• OOCSS *
• SMACSS
• BEM
• Atomic Design *