On every project, I eventually find myself having to work directly on assets on a live server.  But what if I wanted to use the power of CodeKit & LESS on my live site? It's surprisingly easy to set-up, as long as you have the right tools…

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!

There are 13 awesome comments...

1. 

   Bryan Jones - December 22, 2011 at 7:52 pm

   Glad to see someone has gotten Transmit’s mount feature to work with CodeKit! Another way to do this is to use MacFuse to mount the remote server as a disk. Some people who had trouble getting Transmit to work reported success with MacFuse.

   The reason CodeKit can’t detect changes on a remote server (unless you mount it as a virtual disk) is that the app relies on the OS X kernel to tell it when files change. If those files are on a remote server, the kernel doesn’t handle reading/writing them, so it doesn’t detect changes. (The read/writes are handled by the operating system on your server, not your local machine.)

   And finally, CodeKit creates *zero* hidden files in your project. I would be super pissed if I downloaded an app that junked up my projects with hidden garbage, so I will never write an app that behaves that way. These hidden files may be a byproduct of mounting a remote folder as a virtual disk or there may be something else going on. Either way, CodeKit doesn’t create them!

   Thanks for the tips!
2. 

   Dan Luton - December 22, 2011 at 10:10 pm

   Hey Bryan,

   Thanks for the clarifications, and thanks also for such an awesome tool! I can’t wait for it to go gold 🙂

   Yeah, not sure what the files are – at one stage, Coda showed them as duplicate files (I had 3 “main.css”) and I had trouble deleting them.

   Having checked again, they are named like this:

   .fuse_hidden0000004600000001

   …which suggests they are in fact related to Transmit’s Disk Mount feature (I know it has it’s roots in MacFuse).

   I think I mistakenly blamed these files for the problems I had getting remote changes to work, when in fact it was simply because I was attempting the changes over FTP.

   I should probably have waited until I’d played with it a little more before posting this, but I was just blown away by the potential. CodeKit is such an amazing tool, and is already transforming the way that I work. Well done!
3. 

   Leonard - May 10, 2012 at 8:58 am

   Thanks for sharing all of that, I’m loving CodeKit at the moment but I’m still not happy with not having a decent method to use it beyond initial development kick off stages.

   Was curious to know if you’ve stuck with your dropbox method and are still using CodeKit or if you’ve moved onto something new?
4. 

   Dan Luton - May 10, 2012 at 9:24 am

   Hi Leonard,

   I’m still using the Dropbox method – the only problem I have is the delay when saving/waiting for DB to update the CSS, can get irritating when making loads of minor CSS edits.

   Longer term use is something I’ve pondered too; at the moment my CSS is compressed on output, so updating the stylesheet would be difficult without using the original LESS files. There are a few possibilities I guess:

   1) Deploy the relevant LESS files to the server alongside the CSS, then configure CodeKit to pull these and compile directly to the server, using “virtual drives” (as per my original post). This is risky on a live site though, so probably not the preferred method.

   2) Keep the local setup I have now, then any CSS changes would need to be manually uploaded to the server. This would become cumbersome if lots of small changes are needed at some point.

   3) Keep the setup as-is (so the CSS is served from Dropbox). I may do this, or look into another cloud hosting solution (say, Amazon S3) assuming I can connect the remote directory as a virtual drive.

   4) Configure the site to load an intermediate “override” CSS file. Once a batch of changes are done, update LESS in one go and update the main CSS file.

   I guess you could also just detach from LESS/CodeKit altogether on launch and do updates the old-fashioned way – however I would imagine that would be somewhat of a struggle as it would be an unfamiliar CSS file 🙂
5. 

   Coding With LESS | Lovely Geek Design - June 13, 2012 at 3:50 pm

   […] to experiment with a couple articles that were mainly geared towards CodeKit. I found an article, Working Remotely with CodeKit & LESS, and used that to figure out how to get it working for me with Coda and […]
6. 

   matthew carleton - July 19, 2012 at 8:11 pm

   OMG you are brilliant. I have been having issue with developing remotely and I never thought about using dropbox. I could kiss you. (no homo)
7. 

   matthew carleton - July 23, 2012 at 12:56 pm

   now I just need to figure out how to do the variable url path for scss
8. 

   matthew carleton - July 23, 2012 at 1:11 pm

   scratch that. Here it is.
   $assetPath: “path/”;

   div{
   background:url(#{$assetPath}image.png);
   }
9. 

   Per Wiklander - July 24, 2012 at 11:25 am

   @matthew carleton: Is that plain Sass? If you are using Compass, you have the image-url function for this. http://compass-style.org/reference/compass/helpers/urls/
10. 

    matthew carleton - July 24, 2012 at 6:36 pm

    @Per Wiklander: that is scss. But I am not into compass yet. Workin on it. Thanks for the tip!
11. 

    Shina - August 4, 2012 at 9:28 am

    Thanks for sharing.

    This method works for me perfectly, well a bit slow waiting for the CodeKit to update (15-20 sec) all the files in my folder but it works fine.

    Hopefully CodeKit will have the feature later.
12. 

    Dan Luton - August 4, 2012 at 6:00 pm

    Make sure the only file in your dropbox that is updated on compile is the main stylesheet. It should only take a couple of seconds to compile and sync.
13. 

    Mike Laye - September 1, 2013 at 4:19 pm

    @Dan – Like you, I work a lot on remote servers, using Coda, and wanted to find some incorporating compiled LESS into that work-flow. I have found some success in a sort of mash-up of your attempts.

    I don’t use Dropbox, but depend, as you first did, on Transmit to mount the remote site folder locally.

    Then I create (or copy-and-rename the css file) the LESS file, but just to a simple local folder.

    Now, I drop the local LESS file into CodeKit, setting the locally-mounted, remote site CSS folder/file as the destination after compilation.

    Finally, I edit the local LESS file in Coda as usual. Saving the file triggers CodeKit (easy, as they’re both on my local machine), which then compiles and loads the updated CSS file into the remote site folder, mounted locally by Transmit.

    I’ve found that this doesn’t always (or even, often) trigger Safari to update the page view, but then I’m used to working like this in Coda – I rarely use its preview function, preferring the time-honoured solution of hitting refresh on an external browser!

    Any FTP errors or time-outs (I haven’t experienced any so far) would merely mean that the compilation would not get transferred to the remote folder. That could easily be fixed by compiling again in CodeKit.

    @Bryan – The only thing I’m not 100% happy about in this method is that I don’t have a remote copy of the LESS file, in case I ever need to modify the site CSS from another machine or location. It would be great if somehow CodeKit could have an option to also upload the LESS file along with the compiled CSS.

    In the meantime, I’m pretty happy … and a big +1 of thanks to Bryan for CodeKit.

    Best regards

    Mike Laye

Leave a comment: