Saturday review: CodeKit

Whereas LESS.app works only with LESS files, Bryan’s aiming wider than LESS enthusiasts with CodeKit.

• Checking JavaScript and CoffeeScript (whatever CoffeeScript is)
• Giving JavaScript and CoffeeScript an @import statement
• Simplifying importing frameworks
• Optimising images’ file sizes

CodeKit also compiles Sass and Stylus files as well as LESS, giving Sass enthusiasts an alternative to Compass.app, Scout or the command line. I’m not a Sass/Stylus user, I don’t know JavaScript or CoffeeScript either, so I’ll only talk about the parts of CodeKit I’ve used.

It’s easy to get started. Drag a project folder into CodeKit’s only window and it indexes all your stylesheets, scripts, pages and images. From then on, it’s working mostly as normal, with HTML and LESS files in your favourite text editor (mine’s Espresso.)

Now here’s the good part — every time you save a LESS file, CodeKit not only outputs the corresponding CSS file, it automatically reloads the active tabs of Chrome and Safari, showing you the results of your changes, just like LiveReload. Well, that’s the theory anyway. In practice, while Safari tabs reload fine, more often than not, changes to CSS don’t get applied. I put this down to Safari, as Chrome works just fine. When you save a change to an HTML file, those browsers reload too. For now there’s no automatic reloading of Firefox which may upset you if you still use Firefox as a development browser.

Like LESS.app, CodeKit also let’s you exclude LESS files from being directly compiled if they’re already being imported into other files. This saves having to clean out unwanted mixin and bootstrap CSS files from projects — something that always annoyed me about LESS.app.

If you work like me, you’ll keep a set of framework files: CSS resets, style boilerplates for buttons, forms and tables and maybe LESS mixing. Every time I start a new project I make copies of these files and drag them into a project folder. This means that I keep multiple copies of files across multiple projects. Any time I improve one of these files, I have to copy the changes to every project. If you’ve done anything similar, you’ll know how much of a pain this can be.

Now you can keep just one copy of your framework files (I keep mine in Dropbox) and add them to CodeKit. When you want to use a framework file in a project — let’s say LESS mixins — you import it into your LESS file in the usual way.

@import "mixins";

When you save your working LESS file, CodeKit checks within your project first. When it does’t find a file you’ve referenced, it checks your frameworks, imports files from them, then compiles their styles in your stylesheets. I know that this alone is going to make keeping on top of my framework files much easier and my project folders far neater.

Finally, CodeKit optimises project images. Switch to the images tab and either optimise images one-by-one, or ‘optimise all project images’ in one go. CodeKit’s file size savings seem reasonable. I brought down the weight of images in my recent ISO project from 385KB to 335KB — a 13% saving. I confess I mostly leave image compression to Adobe Fireworks and never use a PNG crusher. So the fact that CodeKit includes a compressor that I don’t have to think about is a bonus.

In the end, there’s little about CodeKit that’s unique. If you’re a fan of LESS or Sass, there are other CSS compilers and minifiers. You won’t have to look far for browser reloaders and image optimisers either. But Bryan Jones has done a good job bringing these tools together in an app that (mostly) just works. CodeKit’s interface isn’t perfect yet. There’s no cmd + A in a file list and Lion’s full-screen app mode is buggy, although with an app like this I’m not sure why you’d ever use it anyway.

CodeKit’s not only Mac only, it’s Lion only, so if you’re running anything else, you’re out of luck.

So far, CodeKit looks promising. The beta’s currently free and there’s no mention of price or whether the finished app will be available on or off the AppStore just yet the app will be available on the AppStore for $10.00. I’ll be keeping on top of any updates and can see myself using CodeKit, in combination with Espresso, pretty much every day from now on.