Grow your CSS skills. Land your dream job.

On CodeKit 2.0

Published by Chris Coyier

The following is a guest post by Bryan Jones, the creator of CodeKit. I've been using CodeKit for a couple of years now and I've talked about it plenty. In my opinion it changed the game in front end development making it easy to use advanced tools that, while powerful, felt out of reach for many. Now CodeKit 2.0 it out, which has followed the landscape of front end development, bringing us more powerful tools that are tough to pull off otherwise. Bryan is going to introduce it, and I'll interject here and there to share my thoughts as I've been using 2.0 the last month or so.

What is CodeKit?

CodeKit is an app that helps you build websites faster. It compiles all the cutting-edge languages like Sass, Less, Stylus and CoffeeScript. It live-refreshes your browsers. It combines, minifies and syntax-checks JavaScript. It even optimizes images. All stuff that speeds up both your website and your workflow.

There are other ways to do these things, but CodeKit's mission is to take the pain out of the process. You drop your project folder onto the app and get to work. No JSON files to edit, nothing to install or download. No commands to memorize. It just works.

What's New in 2.0?

For starters I hired a designer (Guy Meyer) so the UI no longer looks like it was repeatedly beaten with a DOS 5.1 manual. The new version is also 1,400% faster thanks to a bunch of optimizations and works a lot better in team environments.

But what you really care about is how it can make you faster. So instead of listing every new feature, here's the top four that will make a difference right away:

1. Refresh Every Browser

Your website has to look good on lots of devices. You pull it up on an iPhone, an iPad, a Galaxy S3, Chrome, Firefox and even IE 11 on a PC. That's a lot of refresh buttons to click. CodeKit can do that for you.

CodeKit will now live-refresh all of these devices and more. Make a change to your code and a split-second later, every device updates to show those changes. No plugins, no complex configurations. It works even with advanced sites like WordPress and Drupal. Just click the Preview button in CodeKit and then copy the URL to your other devices. Once you see this in action, you won't work without it ever again.

Note from Chris: Not only does the page literally refresh when you change something like a template or JavaScript file, the page will do style injection for CSS changes (whether they came from a preprocessor or not). Meaning designing for interactive states is a lot easier.

CodeKit 1 could do style injection too, but now CodeKit has it's own server built-in (which can forward to MAMP or anything else if you prefer) meaning that literally any browser gets the refreshing and style injection.

2. Bower

Bower lets you quickly install over 7,000 components: jQuery, Modernizr, Bootstrap, even WordPress. Bower is now built-in to CodeKit, so all those resources are just two clicks away. Open the Assets area, select the components you want and click the cloud icon. CodeKit grabs the latest versions from the web, along with any required dependencies, and puts them right in your project.

CodeKit also saves you a ton of work when it's time to update components. Just open the Assets area and choose the Installed tab. It'll show you the version of each component in your project and what the latest one available online is. Update them all with a single click, or pick and choose.

Note from Chris: while I haven't had a chance to use Bower a bunch yet, keeping front end dependencies up to date is the #1 reason I want to.

3. Autoprefixer

Vendor prefixes: the CSS rules that only an IE6 Engineer could love. Autoprefixer makes them painless and it's now built-in to CodeKit. You just write standard CSS and Autoprefixer adds all the necessary vendor prefixes based on the latest information about each browser. It works seamlessly with Less, Sass and Stylus. It's also totally configurable: just specify which browsers you need to support and it does the rest.

Note from Chris: I think Autoprefixer is almost as big of a game changer as CodeKit itself, and they are a perfect match for each other. While I'm still a big fan of preprocessors, I'm no longer a fan of using them for prefixing. Autoprefixer is a much better way to handle it. You can learn more about it from it's creator here.

4. Libsass

You're reading CSS-Tricks, so you probably write Sass. It takes a few seconds to compile, right? Not anymore. Flip on Libsass in CodeKit and your Sass compiles instantly. Libsass is a new Sass compiler written in C instead of Ruby, so it's like Justin-Beiber-tanking-his-billion-dollar-singing-career fast.

Now, Libsass is a beta, and some advanced Sass features (like namespaces and the new 3.3 syntax additions) aren't supported yet. But Libsass is advancing rapidly and the goal is to reach complete parity by this summer. Unless you're doing really complex stuff, you can probably use it today and drastically speed up your work. (We used it on CodeKit's site and that one has some really bleeding-edge CSS going on.)

Note from Chris: While Bryan correctly joked I prefer Sass, I don't care tremendously much what you use, because there are things that are very likeable about all the CSS preprocessors. One of the few strikes against Sass is that it's slow to compile compared to the JavaScript-based preprocessors. Libsass makes Sass the fastest as well, so that's pretty awesome (if you can use it).

More Cool Stuff

OK, I lied. There's way too many new features to stop at just four. Here's four more features you'll love:

Source Maps

CodeKit can create source maps for Sass, Less, CoffeeScript, JavaScript and TypeScript files. (By the way, CodeKit compiles TypeScript now.) Source maps let you see your original source code in the browser's web inspector instead of the compiled output, which makes debugging easy.

Zurb Foundation

There's now a "New Zurb Foundation Project" command that pulls down the latest version of Zurb Foundation from the web and sets it up automatically. This was a really common feature request.

Hooks

Need to run a custom AppleScript or Bash script when files in your project change? Maybe tell Transmit or Coda to sync to a remote server? Gzip some files? No problem. Just set up a Hook and CodeKit will run whatever you need.

Note from Chris: It would be interesting to see it run Grunt or Gulp. Part of the beauty of Grunt is there are a zillion things it can do - things that can be super specific and probably aren't a good fit for a core CodeKit feature (e.g. the SVG stuff I described here). I'm not sure if mixing multiple build tools is a good idea or not, but it's worth thinking about.

CoffeeScript Love

If you write CoffeeScript, CodeKit has two new features you'll like. First, you can now prepend JavaScript files (like jQuery) directly to your CoffeeScript files. Do it with a drag-and-drop in the app, or an in-file statement. Either way, CodeKit combines it all into one minified JavaScript file.

Secondly, CoffeeLint is built-in now, so you can syntax-check your CoffeeScript files before they ever compile. This is also handy for enforcing particular styles, like how many spaces a line should be indented.

What's Next?

The short answer is, "Whatever Chris Coyier asks for." The long answer is that I completely overhauled CodeKit's architecture so that adding new features no longer requires major surgery. I plan to move quickly and keep iterating. Jekyll support is at the top of my list. Scaffolding and templates are up there too. HTML minifiers. If-else and loops in the Kit language. As Tim Cook would say, "We have some exciting products in the pipeline."

Get In Touch!

I love hearing from people in the industry, even if they don't use CodeKit. (Grunt FTW!) Come have a look at our new website. I can't take credit; Guy Meyer designed and built it, but we'd really like to hear what you think, one professional to another. You can find me on Twitter: @bdkjones

Comments

  1. JC
    Permalink to comment#

    I’ve been using CodeKit 2 and it’s awesome. There is special upgrade pricing (which may not be obvious straight away) which makes it a real no brainer.

    If anyone here is concerned about support as it only has a single developer then don’t be – I had some small issues (all resolved) and Bryan replied within a few hours, despite being in a different time zone.

  2. Permalink to comment#

    This sounds fantastic, but you forgot to tell a price!

    • Permalink to comment#

      Okay, saw the price on the website. But will there be a discount for version 1 users?

    • JC
      Permalink to comment#

      There is a discount – go to purchase and it will ask you for your V1 license number. I think it’s $18. I didn’t find it entirely clear before I purchased either.

    • Permalink to comment#

      Thank you JC!

    • Dan
      Permalink to comment#

      Upgrading is like when you first purchased it. There’s a set amount or options to give more. It starts at free and goes from there.

    • Peder
      Permalink to comment#

      How can you focus on discount when you pay nada for such an super-awesome product that will save you hours of work and make your pro life so much easier?

    • Pixolin
      Permalink to comment#

      We tend to know the price of everything and the value of nothing.

      CodeKit 2 comes with an Upgrade offer. But honestly—Bryan did an excellent job creating a new software that speeds you workflow dramatically. Talking about an amount as low as $20 (you may actually choose the amount yourself) for such a great tool is ridiculous.

  3. Brendan
    Permalink to comment#

    Excited to try these new features – Codekit IS my workflow currently

  4. Permalink to comment#

    I may try this out, though I am pretty darn high right now on the power of gulp.js (It kinda can just do all the things…). I get that this is supposed to streamline that kinda thing for folks who just want to frikkin roll some fat webz though. Any tool that gets more people into the power of sass, bower, etc – that’s a real plus regardless.

  5. Andy
    Permalink to comment#

    I love Codekit, it’s totally worth buying and supporting. I found myself wasting far too much time with Grunt, Node, etc, but with Codekit it just does everything for me so I can focus on what I’m paid to do – design and code! The new version with Components is just brilliant.

  6. Permalink to comment#

    Thanks for all the work done Bryan, you’re awesome!

    BTW, I’ve made a screencast-review of Codekit 2.0 for russian-speaking audience if anyone is interested: http://youtu.be/X_1wZFGpGUE.

  7. I wish there was a version for Windows too…

    • Permalink to comment#

      From FAQ:

      “I’m on Windows. What do you recommend I use to work with Less, Sass, etc?

      A Mac.”

      ;)

    • Stephen
      Permalink to comment#

      Try Prepos:

      http://alphapixels.com/prepros/

      It’s the closest thing on Windows that I have found to CodeKit’s functionality.

    • Jon
      Permalink to comment#

      I can’t see that Codekit can do anything that can’t be done with Sublime Text and Grunt.

      I have Autoprefixer, jshint, JPG and PNG optimization, JS minification and lots lots more, all running every time I press ctrl+s

      Sublime is also the best and most extendable IDE I’ve ever used, it’s cross platform and it comes with no attitude ;-)

    • halleycarleton
      Permalink to comment#

      If you’re on windows(or even if you’re on mac) I would try gulp or grunt.

      My gulp setup compiles sass, auto-prefixes css, minifies css, lints js, concats js, uglifies js, style injects into chrome on stylesheet changes, auto-refreshes on other file type changes(js, html, php, etc…). I’m going to be moving image optimization over to it soon, and start looking into building a few custom functions that I’d like to automate.

      I started out with mixture, then prepros as a windows alternatives to codekit. Gulp is way easier(probably grunt too, but I haven’t used it yet).

    • Pixolin
      Permalink to comment#

      I can’t see that Codekit can do anything that can’t be done with Sublime Text and Grunt.

      Sure. Yet I switched from Linux to Mac because I wanted to focus on my work, not fiddle around setting up a computer. Not everybody feels comfortable learning a new framework/task runner/build tool every day while setting up CodeKit 2 is fun and done in a glance.

      If you feel happy using Sublimes Build on Save, that’s absolutely OK. However, no reason to talk down a great software that is an awesome tool for others.

    • Mick

      PrePros is amazing, I love it!

      Beautifully designed and very functional. It looks at though a lot of the new features for CodeKit 2 are features that Prepros has had already for months.

  8. johnny_n
    Permalink to comment#

    Great post, Codekit 2 is certainly a game-changer. Has been blowing me away every single day since its release. Bryan is on a different planet.

  9. Jon
    Permalink to comment#

    From their FAQ:>

    “I’m on Windows. What do you recommend I use to work with Less, Sass, etc?

    A Mac.”

    Wow, what a loser! FYI, even if there was a Windows version I’d avoid any software created by this guy. Just use Sublime and Grunt :)

    • Greg B.
      Permalink to comment#

      Obvious sarcasm is rampant on that site. Did you ignore the fake reviews as well? The guy thrives on tounge-in-cheek humor, it doesn’t make his product less valid.

    • Jon
      Permalink to comment#

      No, I noticed those too, but even those were all Apple related.

      Look, lots of people have a PC/Mac bias, but it’s childish, and you shouldn’t let it work it’s way into your product’s website. It just makes you look unprofessional, not funny.

      And although it might have been an attempt at humour, Windows user often have to put up with the misguided sense of superiority Apple users often exhibit and it gets tiring. It’s his choice at the end of the day and he’s choosing to lose a large part of his potential audience by letting his personal preferences get in the way of his business. All the more business for rival products.

    • So it’s unacceptable for the author to make fun of Windows users a bit, but perfectly okay for you to call him a loser, despite the fact that this “loser” created an invaluable tool for many? Double standards anyone?

      All the more business for rival products.

      I’d love to see rival products like CodeKit for Windows.

    • Gabe
      Permalink to comment#

      “Wow, what a loser! FYI, even if there was a Windows version I’d avoid any software created by this guy.”

      Oh, come on. I get being frustrated that there’s not a Windows version of CodeKit, and maybe the get a Mac sarcasm rubs you the wrong way (I say get a sense of humor on that one), but don’t get all hyperbolic about it.

  10. Permalink to comment#

    That’s awesome. Didn’t know the new version is out.

    Mamp Pro recently revamped couple of weeks ago, I believe. They revamped everything, such as website (fully responsive), new logo and UI. I’m not too fond of their UI on MAMP Pro. It’s quite bigger than the older one.

    Sublime 3 + MAMP Pro + Codekit = Best tools ever

  11. Yes. You had me at 2.0. I will now be in the process of giving you my money. Enjoy!

  12. Joe
    Permalink to comment#

    How about a build that works with linux? I know that most people tend to build on macs, but a mac is just a fancy GUI on top of linux. So even if you hate windows like the rest of the dev world how about a GTK version?

    • If you refering to the BSD layer (Darwin BSD) in Mac OS X, it’s not Linux. If it were a command line only app, then yes, but it’s not. There are lot’s more to OS X than BSD. A GTK version would be a total rewrite from scratch.

  13. I will put another vote in for a Windows version…some of us use Windows…

    The feature set in this program is so great it even makes consider buying a Mac just for this program…just sounds so amazing…

    Looks like an amazing program…

    • Greg B.
      Permalink to comment#

      Prepros is a pretty great Windows alternative.

    • Michael, time to make the jump. Less talk, more rock!

    • Xander
      Permalink to comment#

      Same. Can’t be pained into switching to an evil OS for one app though. Keep banking on an Ubuntu or Windows version. Prepros is great but has it’s issues.

    • Gabe
      Permalink to comment#

      Come to Mac for CodeKit, stay for the far superior *nix command line interface.

    • Permalink to comment#

      And there are some other cool pieces of software exclusively on this OS, too! Like the phantastic font editor Glyphs or Sketch the new screen design tool. Come to the other side of computing where it is fun!

    • Kristian

      I have been developing on a Windows machine for years, never used a Mac in my life. I bought a MBP with Retina maybe 2 weeks ago. I’ve never been happier. I always had a bias that Mac’s were overpriced and not really worth the money. That may have been true not too long ago, but just like KIA, Apple has really put some quality into this new line. My 13″ MBP is hooked up via thunderbolt ports to 2 27″ inch, Dell ISP monitors at 2560 x 1440, plus the Macbook itself. So a 3 monitor setup that is just as fast as my gaming PC in terms of anything dev related, and the best part? I can unplug the cables, and continue building sites on the toilet! The entire workflow, vagrant server, and files are right inside the MBP and you can plug in the monitors for max productivity, or go wireless for max portability. No more having to sync files from my old laptop and my desktop. You can even close the MBP monitor and the “desktop” moves over to the 2 external monitors without the MBP going to sleep and hook up a mouse and keyboard to turn the MBP into a sleek little desktop tower that you can tuck away.

  14. Thanks man! Using this daily. Really a game changer. Recently purchased previous version so upgrade to this was free. Been waiting for Firefox auto-refresh but can’t see it happening in this version either? at least the article indicates this way:

    You pull it up on an iPhone, an iPad, a Galaxy S3, Chrome, Firefox and even IE 11 on a PC. That’s a lot of refresh buttons to click. CodeKit can do that for you.

  15. Dan
    Permalink to comment#

    I picked this up a few months back and hot damn did it save me a lot of time. It’s an amazing app and my upgrade is happening for sure. Thanks for an awesome program! By the way, if you’re worried about an upgrade fee, don’t. You can upgrade for free OR toss the maker a few extra dollars. He deserves it.

  16. Permalink to comment#

    I just upgraded. I wish it kept my old folders that I had it detecting. It appears I have to re-add them all back again.

  17. Ferdy
    Permalink to comment#

    +1 for a Windows version, I’d be your first customer.

  18. Brandon Reid
    Permalink to comment#

    Installed…. SOOOO AWESOME! Took me 2 minutes to have my iphone refreshing changes instantly. The SASS really does compile super fast too.

  19. Devon Beard
    Permalink to comment#

    Codekit is the reason why I keep putting off learning Grunt… But thus far Codekit has been great. I also love being able to point to local gem versions of Sass & Compass.

  20. David
    Permalink to comment#

    In faq :

    I’m on Windows. What do you recommend I use to work with Less, Sass, etc?
    A Mac.

    Okay, then why is CodeKit $29 when similar apps are $9.99?
    For the same reason a Macbook Pro does not cost the same amount as an Asus netbook.

    I think you have a serious problem with mac…

  21. Michael
    Permalink to comment#

    How do you know someone uses a Mac?

    They tell you every fucking chance they get.

  22. Permalink to comment#

    Bryan here. Thanks for all the feedback guys!

    To the folks that are concerned about my Apple fanboy-ism, I’d say two things:

    1) I don’t hate Windows at all and I think some of Microsoft’s latest work is actually a bit more innovative than what’s coming out of Cupertino. I’d write CodeKit for Windows if I knew that platform. I just don’t. So far, no good developer has offered to work with me to port CodeKit. But I am open to the idea.

    2) You can’t go to a baseball game and say, “This is ridiculous! The announcer is CLEARLY biased towards the home team! What a loser.” Likewise, when you’re reading my website there’s clearly going to be a little playing to the home team in the copywriting. Getting upset about it makes no sense.

    Anyway, thanks again! I like reading what everyone thinks!

    • Dariusz
      Permalink to comment#

      Hello Bryan
      Thank you for upgrade.

      There are just two thinks I don’t like about it:

      first of all I had to re-add all projects. I think the auto-import from previous version is must-have.
      second – it would be nice to have possibility to choose if I want to use a CodeKit server or just have auto-refresh in browser (Chrome and Safari is just fine for me when developing).

      CodeKit server is soooo slow. Yes – I have turned Internet sharing OFF. It’s just slow. When I start website from somedomain.local (set in httpd-vhosts.conf and in /etc/hosts – I don’t use MAMP or any similar apps) it works normal, and if I set it in CodeKit as “external server address” it is loading slow – every file needs 5-15s to download :(

      It would be great if I could choose the method of browser refresh – old direct refresh or CodeKit server.

      For now I’m going back to 1.9.3 :(

      And one more thing – font on your website has to small contrast. When I was reading help page it hurts my eyes :(

      Sorry for this feedback.

      Regards,
      Darek

  23. If you need a CodeKit => Coda hook for auto-uploading files, you’ll find an example here: http://chsmedien.com/blog/2014/03/codekit-hook-for-coda

  24. Sam
    Permalink to comment#

    Nice upgrade! This is worth taking a look at over grunt/gulp now. libsass is my favourite improvement. Speed!

    However, after a few minutes of playing, I see that the Susy framework is requesting for compass to be installed. Susy 2 doesn’t require compass anymore, the reason why I personally use it almost exclusively now.

    • Permalink to comment#

      What’s wrong about Compass? =) I mean it’s not cool, that CodeKit uses not latest Susy, but Susy 2.0 still has some features, dependent on Compass.

    • Sam
      Permalink to comment#

      Nothing is wrong with Compass! I just don’t need it personally.

      I prefer autoprefixer over all of the vendor prefixes the Compass mixins contain. I also like my library of mixins, and separating some into extends instead. It’s the reason I like Susy, I get to choose how I want to do things. It’s not a shot at compass at all, if you like it use it.

      Which Susy features require Compass? The docs say otherwise.

      Anyway I see you can get latest version directly from the “Assets” tab in CodeKit.

    • Sam
      Permalink to comment#

      Also, if I remember correctly, another blocker is that libsass does not work with compass yet.

    • Permalink to comment#

      Eric M. Suzanne (the creator of Susy) discusses Compass dependency in this screencast http://www.youtube.com/watch?v=m7k-vBzebPg, on 3:00.

      We’ve dropped off the Compass requirement although we still have some cool Compass integrations if you want them.

      I believe it’s about typography, vertical rhythm and debugging vertical baseline.

      BTW, Libsass doesn’t work with a lot of 3.3 features either =(

  25. Xander
    Permalink to comment#

    Looks pretty cool, but I’m not about to switch to Mac just for this. Ubuntu needs this.

  26. Permalink to comment#

    I’ve been using CodeKit 1 and it very good, and i want also upgrade 2

  27. Permalink to comment#

    Bower looks interesting, is it possible to add additional 3rd party dependencies that aren’t featured in the 7000 list?

  28. Permalink to comment#

    I just upgraded from Codekit 1 and I think this version is great. Works just as easy as version 1, just drop your site folder on the app, set your output paths and you are ready to go. It all looks and works very smooth, love it. The preview and refresh of the site via Bonjour on my iPad works fantastic.
    Thanks!

  29. Leon
    Permalink to comment#

    Will definitely check it out, lots of cool features :)

    I had submitted an issue on his github however, simple question about turning off the constant notifications… I turned off growl notifications in OSX system preferences, but the Codekit 2 notifications still kept coming up for every SASS change, and the author was pretty rude and closed the issue right away :/

    Was a pissy way to interact with potential customers, but I think in this case the product still shines.

  30. Is anyone else having issues with inconsistent page refresh on save? I’m working on WordPress stuff, running Mamp, & compiling SASS files through CodeKit 2. I only have one site active at a time in CodeKit, and I have external server configured.

    Regardless, when I save a file it’s like a 1 in 4 chance that CodeKit will refresh my browser. I’ve been seeing this in both Chrome & Firefox.

    Aside from that, I upgraded to CodeKit 2 as soon as I heard about it and I’m loving it. I ran into one issue and Bryan was quick to respond on Twitter and super cool getting me sorted out. CodeKit remains an indispensable tool for me. Thanks for your good work, Bryan.

  31. bkahlert
    Permalink to comment#

    There one BIG LIMITATION to be aware of:
    I have the problem that the auto-refresh feature for less/css does not work using WordPress + CodeKit.
    I mailed the developer of CodeKit (Bryan Jones ).
    He told me that this is due to elements at the end of the which is against the specs.
    I wrote a small WordPress plugin that deletes those elements et voilà it worked.

    So I asked Bryan if he could fix the problem by allowing elements also to be in the .
    He refused since this is against the specs – ignoring that this is common practise. In WordPress this behaviour can be even triggered using wp_enqueue_script + $in_footer = true.

    It’s frustrating. You can only change all plugins that don’t meet the, catch all the output and rewrite (performance penalty!) or use an alternative to CodeKit.

  32. Gary Leahy

    Great time saving bit of software, looking forward to Jekyll support!!

  33. Jonas Johansson
    Permalink to comment#

    Codekit 1.x was nice. Codekit 2.0+ looks/feels terrible, the UI feels like a bad Windows application. Hello Grunt!

  34. Lee
    Permalink to comment#

    I’ve been using CodeKit 1 for a while now and found it very useful when developing with WordPress themes and html sites. I don’t use it fro Rails or Sinatra, I use asset pack and grunt etc. Anyway I was happy to pay for CodeKit 2 and want to help support it but after having a play with it I don’t like it.

    Maybe if your a Designer then it’s an improvement but as a developer I think it’s doing too much, I have my own workflow and CK2 seems to be making too many decision for me.

    I also have issues with working directly from the bower_components directory due to the extra unnecessary cruft in production. I’m sure for the most part people will love all the extra features and automation, but not me ! sorry

  35. Max
    Permalink to comment#

    After buying Codekit 2 to support the author, I still use Codekit 1 just because the interface is easier on the eyes. I had to update SASS and Bourbon by opening the package contents of Codekit (1), but the new version’s green on grey was just too much.

  36. Perry Merrity
    Permalink to comment#

    I’ve been using CodeKit for about a month now. I like it.

    But Prepros. It’s just as cool. I think it’s easier to set up and navigate as well. Not to mention the double benefit of Mac + Windows making it easier no matter which of my laptops I use. Seriously, if you’re a Windows user or Mac user familiar with CodeKit then you should check it out! It’s free and limited unless you pay up, but you’ll get the picture if you’ve used CodeKit.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".