Whats your HTML/CSS workflow like...? Sass or Less? Tools you use...?

over 8 years ago from , Sr. UX Designer

More and more I spend time coding front ends these days, mainly working on the front end...

I'm trying to make a consious effort to improve the way I write code for maintainability and want to get a feel for what other people do.

What are some of the things you can't live without? Tools or processes?

I'm currently using Firefox with Firebug to inspect and change in the browser, Sublime Text Editor 2, SourceTree for our REPO with BitBucket, Xampp for hosting a virtual server.


  • Daniel ArcherDaniel Archer, over 8 years ago

    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.
    9 points
    • Brennan Smith, over 8 years ago

      This is a great workflow that I recently adapted, it streamlines the process without all the bloat. Neat is a great semantic framework. I wish I would have found it sooner.

      3 points
    • Rafael Derolez, over 8 years ago (edited over 8 years ago )

      Hey man,

      Nice workflow indeed! I'm trying to setup something similar, but Codekit still compiles all my .scss files. How did you set it up to compile just the all.scss?

      EDIT: Ok just started a new project from scratch and everything's working. Thanks for sharing!

      1 point
  • Kyle ConradKyle Conrad, over 8 years ago

    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

    5 points
    • Ed AdamsEd Adams, over 8 years ago

      Thank you for posting a repo, that's really helpful to me as someone looking to adopt Gulp. :)

      0 points
    • Elliott ReganElliott Regan, over 8 years ago

      Same here. I have a simple node server than I can use to generate static files, deploy to a server (easiest is Heroku). I've also added LiveReload to my Gulp file, which I assume is similar to BrowserSync.

      0 points
      • Kyle ConradKyle Conrad, over 8 years ago

        It's very similar, but I actually switched to BrowserSync after trying it out. It doesn't require a browser extension and works across all devices - so I can pull up a site I'm working on on my phone or tablet and they also reload the code live when I save.

        Also, I found it to be 2-3x faster than LiveReload and incorporates a static server, so I didn't have to run another server in my Gulp task since it was inherent to BrowserSync.

        1 point
        • Elliott ReganElliott Regan, over 8 years ago

          Huh, cool. It must inject a JS script into your site when it serves it?

          I'll have to try it out. Definitely interested in the speed increase.

          0 points
    • Michael XanderMichael Xander, over 8 years ago

      Exactly the same here. I just use have additional a Gulp tasks to gzip files as-well.

      1 point
  • Nick TassoneNick Tassone, over 8 years ago

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

    2 points
  • Ian CarrIan Carr, over 8 years ago (edited over 8 years ago )

    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.

    2 points
  • Darth BaneDarth Bane, over 8 years ago


    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.


    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.


    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.

    1 point
    • Elliott ReganElliott Regan, over 8 years ago

      Hey, we have a very similar setup, except I am using Gulp instead of Codekit. Check out the tool 'ngrok' to make your local server available off your network.

      I'm also switching between Atom and ST3. ST3 is definitely faster, and has a better UX (just small things like clicking and dragging to resize split window panes). Leaning towards ST3 at the moment...

      0 points
  • Pete LadaPete Lada, over 8 years ago

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

    1 point
  • Nikita KorotaevNikita Korotaev, over 8 years ago

    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.

    1 point
  • Zach ReedZach Reed, over 8 years ago

    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.

    1 point
  • Keaton TaylorKeaton Taylor, over 8 years ago

    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.

    1 point
  • Thibault MaekelberghThibault Maekelbergh, over 8 years ago


    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


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


    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


    Loaded with dotfiles and a pretty color palette.


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

    0 points
  • Daniel WiklundDaniel Wiklund, over 8 years ago

    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:


    To compile my SASS/Compass stuff


    To optimize all my graphics


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


    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

    0 points
  • Roel van HintumRoel van Hintum, over 8 years ago

    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).

    0 points
  • Nathan ManousosNathan Manousos, over 8 years ago

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

    0 points
    • Kyle ConradKyle Conrad, over 8 years ago

      Brunch looks interesting, but it looks more to me like a base framework kind of thing and less like a simple build system.

      0 points
      • Nathan ManousosNathan Manousos, over 8 years ago

        It's really not a framework. It just builds your stuff. I have it set up to concatenate, compile and do live reload of my project. I also have it hooked into bower to where I can just type bower install jquery --save and then return to my JS file and jquery is ready to use. It's amazing.

        0 points
  • Anthony Garand, over 8 years ago (edited over 8 years ago )
    • 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.

    bash <(curl -s https://raw.githubusercontent.com/garand/base/master/setup)
    0 points
  • Brian ZelipBrian Zelip, over 8 years ago

    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.

    0 points
  • Leon KLeon K, over 8 years ago

    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.

    0 points
  • Alex ChanAlex Chan, over 8 years ago

    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...).

    0 points
  • Rick MetzgerRick Metzger, over 8 years ago

    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.

    0 points
  • Adam HollisterAdam Hollister, over 8 years ago

    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

    0 points