I do a lot of work in design, front-end, and in back-end (ruby on rails), but when it comes to front-end, there's a small set of tools that I use that speed up development so much..

• CodeKit (Zach Reed - I definitely second that.) Most useful tool is that it compiles my Sass files automatically with every save, and refreshes the browser immediately. Personally, I have a main Sass file (all.scss) that uses @import to reference the other Sass files in my project (broken up by page). CodeKit recognizes the @import in all.scss, and only compiles all.scss. That way, my html docs only need to reference the one compiled 'all.css'.
• Bourbon, Neat, and Bitters. These Sass extensions by Thoughtbot (extra mixins, grid system, and basic styles) help me organize the basic things so that I can focus on implementing the design into code. I highly recommend them in place of any other grid system like Bootstrap/Foundation, because they keep your HTML extremely clean and flexible.
• Sublime Text 3. Install a few extra packages to help you speed up your workflow like: Derby (for Bourbon/Neat) and Sidebar Enhancements.

I'm using Gulp as my build manager - it compiles my SCSS files and all of that, and then when I'm ready to launch, it concats and uglifies JS, minimizes CSS and images, all that good stuff.

SublimeText as my code editor.

In conjunction with my Gulp system, I'm using BrowserSync, so every time I save a JS or SCSS or HTML file, it live updates across all browsers instantaneously - whether they're on my desktop or on my phone or on my tablet. It's kind of magical.

I have a github of my base starting point - https://github.com/kyleconrad/blank-gulp

Sublime Text 3 & iTerm2 + Gulp + Node + SASS w/ Bourbon + Heroku

For CSS I've found that many small, well organized files, is the key to my sanity. I switch between plain css and Sass based on the project, but I always use Make to automate the concatenation and processing of my files.

Make has been a great tool for me (though any automation / build tool can work) as it lets me mix up the tools I use without changing the general process - edit my code, run make, test, repeat. I can change from CSS to Sass, or add in autoprefixer or cleancss and its still the same steps for me (and anyone else who has the Makefile).

And I can't live without Sublime Text 3, Git, and iTerm 2 with the vital Dot Files.

Tools

Codekit For auto-compiling my SASS and HAML files down to CSS and HTML. Also to run a live local server that I can access from any device on my network.

Sublime Text 3 / Atom Still flip-flopping between these two. I love Atom but it's not as smooth as ST.

Google Chrome Safari is faster for me in day-to-day surfing and personal stuff, but Google Chrome feels snappier in development.

GitHub for Mac As a designer I love visual interaction, so I prefer using the GUI client of GitHub instead of doing through Terminal.

Languages

HAML I do all my HTML in HAML, even if it's not a Ruby project. I use it to create Wordpress themes, anything. Reason: I find the HAML syntax extremely fast and easy to work with.

SASS I'm talking pure SASS, not SCSS. Reason is the same as for HAML: I find the SASS syntax quick to use, and I'm a big fan of indentation logic.

jQuery I'm not very good at JS, so jQuery is my choice. Millions of plugins and good documentation is key for "beginners".

Angular Just recently started getting into Angular as we needed a good middleman/bridge solution at work.

Approach/Workflow/"Rules"

1. For every new project I'm using my own boilerplate/bootstrap HTML/CSS base setup that has been refined for years, based on experience. I keep it up-to-date through GitHub.

2. One SASS file imports all other partial SASS files (layout/home.sass, partial/nav.sass, and so on).

3. Design everything in-browser. I use Photoshop for image editing or graphics creation, not for designing websites.

4. Create a fully clickable static demo of the finished project. This is great for clients, who get to see what the site will look like, without having to do any backend at all until the design has been signed off. Also allows me to tweak the designs extremely quickly as it's still just a local static site - no waiting around for local servers loading or anything like that.

...umm I think that's about it.

Sass, Jekyll, modular sass patterns, and Gulp. If it was any easier, it would be illegal.

Integrate Gulp (or grunt) into your workflow. A lot of plugins available to pre-process/concatinate/minify your js/css/html. You just run one command to do it all.

CodeKit makes my life so much easier with local testing and compiling: https://incident57.com/codekit/

You can use that for pretty much any js framework, or css framework (less,sass,etc.). I would highly recommend using it for whatever route you take.

I've been fighting with this lately too. I want to move to more maintainable code using some sass and newer web technologies but I just don't know where to start most of the time.

SSS

Simple Sassy Starter for getting everything I need.

Compass / Bourbon

I'm still not completely sure which one suits my workflow best, school teaches me Compass, I think I prefer Bourbon

Project

A useful yo generator for creating web applications, my teacher made this. Includes Backbone, Compass, jQuery

Mamp

For running PHP & MySQL on my Mac.

Atom & Coda

Atom for robust editing, Coda for big scale projects or remote editing directly on the server

Terminal

Loaded with dotfiles and a pretty color palette.

(Motherplate)

Seems really interesting, but haven't used it in projects yet.

I have been using CodeKit, and it's an awsome tool, for at couple of years, but around a year ago i switched to Grunt – and i have to say it makes everything so much easier. Grunt takes a little effort to learn but after that i saves you so much time, and it's much more flexible than CodeKit.

I use the following Grunt plugins:

Compass

To compile my SASS/Compass stuff

Imagemin

To optimize all my graphics

Bake

To handle small partial/template HTML files that i can include in my code

Connect

Local server with live reload

I use Atom with a handfull of plugins, I've used Sublime for awhile but i think that Atom offers a better integration Grunt and GitHub

Atom, less (sass at work, but less just compiles faster), gulp, browserify, marionettejs, Github for mac (also for non-github repos), chrome, bootstrap (just as a good less mixin lib and framework).

[Brunch](brunch.io) is the best solution I've found for compiling all your stuff. Way easier than grunt/gulp.

• Sublime Text 3
• SublimeGit (Really, freaking, amazing)
• Sass (SCSS syntax)
• gulp
• Safari

That's really it.

I have all my dev stuff for new projects on a repo that you can check out. https://github.com/garand/base

I have a fancy bash command for that template that I use to setup new projects.

I use sublime 2, iterm, duckduckgo, google, and youtube. And different browsers.

I used codekit for a while, but once I got knee deep in jekyll I used it less. Jekyll + GitHub Pages is really an awesome resource. I've been learning both more, and trying out Prose.io for the multi-author support.

On top of default Emmet, when parts of a project allow for it (repetition of certain markup), I configure a shortcut in emmet's snippets.json file to spit out html with a keyword. In this same way I have some rules that quickly produce my own html & css boilerplates.

Digging into Basscss got me deeper into sass and experimenting with OOCSS. The toolkit's very recent update left behind the traditional sass build approach for Rework, based on Gulp.

I've started looking into this rework and gulp approach, and ran into some brick walls today with gulp (especially re: gulp.watch()).

It's intriguing though, and I can definitely see that these kinds of tools in a professional workflow would be awesome.

I work on Windows and Mac both, so I mostly only use software that is compatible with both, which might limit my workflow possibilities, but I only got my first mac a week ago, so things might change, fast. I do almost only front-end work.

• Chrome with developer tools for testing
• Sublime Text 3 with many plugins I cant recall right now
• Prepros for compiling Less and Jade
• Fenix Webserver for the virtual server (Windows only)
• Github for Windows/Mac for hosting and version control
• Synology Cloud Station

Most of the projects I work on I design just as flat files so Fenix webserver is great for that. I code in Jade and Less as replacements for HTML and CSS. I use Synology cloud system to sync file changes between my Win desktop and MBP without having to have them running at the same time when I want to sync changes, and it makes a realtime backup to my NAS so all projects stay save.

I write a lot of CSS (SCSS) and a decent amount of JS. Tool-wise, I run with Sublime Text 3, OS X Terminal, SASS (SCSS), Git, Hub (CLI Github Integration), Node (and NPM), Bower, Gulp, Chrome/Firefox/Safari (prefer Chrome and Chrome dev tools), and VMWare Fusion for IE VMs.

If I need to test for mobile outside of the devices I own, I'll use the iOS emulator that's bundled with Xcode or the Android emulator that comes with the Android SDK, though it's pretty terrible to boot up. I've tried Sauce Labs and Browser Stack and they're nice, but I prefer emulation directly on my desktop. I haven't run into a project that needed testing for Windows Phone or Fire Phone just yet. Livereload works great with this type of setup.

If I need a local server, I'll either run a simple node server or use MAMP if there's some PHP requirement.

Depending on which project I'm on, I'll switch between frameworks (Bootstrap, Foundation, etc...), fork something, or just roll my own. I'm a fan of Bourbon, Neat, and Bitters, but lately I've just been forking Bootstrap and tearing the things I don't need out of it. I like to dabble in everything so I can get a better sense of what works and what doesn't for myself and the project as a whole.

I've been mostly working with CLI tools to better understand what goes on in the background and how things work. But I can definitely see the attractiveness of an integrated tool like CodeKit. You can basically take care of everything (and more) on that end with Gulp tasks (compiling, minifying, spiriting, etc...).

I use Sass exclusively for my css. The benefits of using a css-preprocessor far outweighs what little disadvantages exist.

Like another user mentioned, I also have a main Sass file (styles.scss) then a series of child Sass files (_home-page.scss) included in the main file using the @import function to better organize my code.

I'm no developer, but I made the switch to using the command line instead of a GUI like SourceTree to manage my repos and commits. It has a high learning curve at first, but once you learn the text commands it's much faster then using a 'point and click' application.

When I was doing php work I used MAMP to launch a virtual server, but my company primarily does rails projects so I typically just launch a rails server in the command line. For my personal projects; which are vanilla HTML, SASS, and JS; I'll just deploy a simple python server in the command line.

$ python -m SimpleHTTPServer

I use Sublime Text 3 with a bunch of packages installed as my text editor.

Haven't used any preprocessors or grunty type things yet, although I am fascinated by how they could potentially transform my workflow. I've got a couple of weeks off coming up soon so I plan on having a go at integrating Sass into my workflow and maybe trying out Gulp too!

Currently I'm just doing things the old fashioned way with Sublime Text 3 (with Emmet and various other enhancements), Chrome's inspect element function and sometimes Firefox's version (has a pretty cool responsive mode), MAMP or WAMP at work (we use Windows), Transit for FTP