What is CodeKit?

CodeKit is a web development tool for Mac, written by Bryan Jones (follow him on Twitter here).  At it's most basic level, it runs "behind the scenes" of your usual IDE (I use the excellent Coda).  It compiles LESS, SASS, Stylus and other code files as you work – it provides error checking and minification for CSS and Javascript amongst others.

It's been around for a few months – still in Beta stage, but from what I can see, pretty much ready to go.

It basically allows you to develop your sites using LESS (or one of the others) without the need to load the LESS dependency (a small Javascript file which normally does the compiling for you when you load the site).

It's smart. Really smart. I would suggest you check out the website and Bryan's excellent videos to get a better grasp of what it can do for your workflow.

What is LESS?

LESS is described as "the dynamic stylesheet language". I'm not fluent with LESS yet, I hadn't dived-in with everyone else partly because I've been busy of late, and partly because I was hesitant due to it's apparent reliance on Javascript to work correctly.

LESS allows you to use Javascript-style variables and functions within your CSS, and to construct CSS in a way that's far more structured and manageable in the future.  The logic is pretty simple and easy to get to grips with. Go check out the LESS website now for more information and code examples.

What You'll Need

Here's what you will need in order to work directly on your live server/website with CodeKit:

• A Mac, running OS X 10.7 (Lion)
• An IDE for code edits (Coda, TextMate, Espresso, etc)
• A copy of the CodeKit Beta (download here)
• A copy of Panic's Transmit (download here) – you will need to buy this if you continue to use it. Note that you could probably use any software which allows you to mount a remote site as a "local" drive, but I only tried with Transmit's "Mount as disk" feature.

How to set it up

1. Mount your remote site/folder using Transmit. You should see it appear under "Devices" in the Finder sidebar.
2. Open the site/folder in your IDE so you can edit the files (just like you normally would).
3. Drag the mounted drive directly into the main CodeKit window. It will scan the structure automatically and show you the file hierarchy.
4. Begin editing!

CodeKit will recognise the changes you make as you save the files.  You may need to wait a few seconds longer for the data to be transferred (compared to working locally, which is instant), but it works perfectly.

Update

I had some issues with this method today – at first I thought it might be a combination of attempting to use a local CodeKit framework with imports into the remote LESS file, however it turned out to be because I was editing the remote files via FTP.

For some reason, CodeKit does not recognise these edits, and the file (no matter how many times you save, or refresh the project in CodeKit) will stay as it is. Looking at the folder structure, there are some hidden files generated by CodeKit which could be to blame (cache files perhaps?).

Anyway, the workaround is to simply edit the files as if you were working locally, so just drag the mounted files/structure (how you do this depends on the IDE of course) into your IDE and edit then as if they were local files. CodeKit then recognises the changes and works as normal, including importing any framework files you're referenced.

Oh, and if you use Coda, I also found a useful syntax highlight mode for LESS, which you can download here:

http://groups.google.com/group/coda-users/browse_thread/thread/b3327b0cb893e439

Update 2: Working with CodeKit and Dropbox

So, after trying remotely working like this on a bigger project, I soon hit some problems – disconnection errors, FTP limitations, that sort of thing.  If these occur mid-save, that can help you lose some data, which is never a good thing.

It's worth pointing out that these problems are not the fault of CodeKit; just limitations with server hardware, setup and that sort of thing.

I didn't want to move the development work locally (it makes it too hard for things like client approvals), so looked into other ways of working remotely, and Dropbox provided the answer.

You'll need an account with Dropbox of course (sign up with my affiliate ref and get an extra 250Mb here), as we'll be using it's Public Folder feature to store our compiled CSS.

How to set it up

• Create a local "assets" folder on your computer.  I created this within a private projects folder within Dropbox, since that way you get some backup/version control and it allows you to pick up on a different computer if you want.
• Your assets folder should contain at least your LESS files that make up the compiled CSS.  You can also add any CSS images and Javascripts in there if you want to take advantage of CodeKit's compression tools, but remember you'll need to manually upload to your server if these are compressed or compiled.
• If you're using the LESS @import feature correctly, the extra LESS files should already be excluded for compilation, with the exception of the main LESS stylesheet which compiles.
• Set the output path of your main LESS file to a your "Public" folder within Dropbox.  You can put it into a subfolder if you want to keep things tidy.  Get the public link for the file from Dropbox.
• In the main HTML document for your site, paste the public Dropbox URL for the CSS source file.

That's pretty much it. When you edit and save any of your imported LESS files, CodeKit will compile the CSS, save it to Dropbox, and Dropbox will instantly update the online version.  Due to the generally small size of CSS files, this should only take a couple of seconds and you'll be able to refresh and see your changes.

How to deal with relative CSS image paths

LESS makes it easy to fix any path issues – obviously unless you save all of your images within your Dropbox public folder, they won't show up because the path will be incorrect.

To fix this, set a less variable for your site's Base URL:

@baseURL: "http://www.mydomain.com";

Then, simply reference this variable every time you want to use an image in your CSS:

.logo {background: url("@{baseURL}/images/logo.png") 0 0 no-repeat;}

…and you'll be good to go!

Panic Coda

Web: panic.com/coda | License: Commercial, $99

All the coding tools you could need in one place, including syntax-highlighted editing of all major code-types such as PHP, CSS, HTML, Ruby, Javascript, XML and more. I particularly love the excellent Site Manager which stores all of your sites in one place and provide easy access for direct, live editing of the site code using FTP, and the clips manager that serves as a snippets repository for reusable code.

Filezilla

Web: filezilla-project.org | License: Free

Simple to use and packed with great features – one of the best free FTP clients out there.

Adobe Fireworks

Web: www.adobe.com/products/fireworks | License: Commercial, ~$299

Easy to use graphics editor with the best support for PNGs for web use. Build rapid designs and slice them up ready to build into a template. Fireworks can also handle (most) Photoshop PSDs with ease, so it's particularly useful if you work with designers who prefer to work in Photoshop.

VMware Fusion

Web: www.vmware.com/products/fusion | License: Commercial, $79.99

Set-up multiple operating systems which can be run in OS X without needing to reboot. Essential for effective cross-browser testing.

MAMP

Web: www.mamp.info | License: Free (Pro version: £39)

Localhost server environment to enable fast, live development – provides a one-click server running Apache, PHP and MySQL.

Quicksilver

Web: docs.blacktree.com/quicksilver/quicksilver | License: Free

Quickly access all of your applications at the touch of a button – no more searching around in your Apps folder!

Apple Time Machine

Web: www.apple.com/macosx/what-is-macosx/time-machine.html | License: Free (ships with Mac OS X)

The perfect incremental backup solution – and best of all, ships with OS X and is seamlessly integrated. Just add an external disk drive!

Betterzip

Web: macitbetter.com | License: Shareware, $19.95

Brilliant archive utility offering a variety of formats and and easy-to-use interface.

Skype

Web: www.skype.com | License: Free

Communicate with worldwide clients for free, or add a real phone number without needing a physical phone line.

Process

Web: www.jumsoft.com/process | License: Shareware, $39

Useful task-list and project tracking.