You’re reading an article by Jay Robinson, a designer living in California.

Coda Emulated in WebKit

Also fea­tur­ing HTML5, CSS3 & jQuery

I got tired of the bor­ing look of a stan­dard Apache web direc­tory. So instead of brows­ing fold­ers the default way, I built a small index.php file in the root, grabbed all fold­ers dynam­i­cally, injected them as HTML5 and styled them with CSS3. Since I work with Coda all day, I chose to emu­late their Sites View inter­face. Coda is a great text editor/FTP client for Mac OS X. If you’re not famil­iar with Coda, check it out at Panic’s web­site.

About the Coda-fied web direc­tory — my code is com­pletely self-contained and portable. It also uses no images for style. All gra­di­ents are gen­er­ated with the CSS3 gra­di­ent pro­posal, best sup­ported by WebKit. The screen­shot thumb­nails can be gen­er­ated dynam­i­cally. Below is a pre­view, and a few notes on how it’s made, and a link to the work­ing demo.

Plain old web directoryHover for alter­nate view.

Let’s get started.

  1. First we need to write the PHP grab all fold­ers in the direc­tory and cre­ate links from them. (Notice it ignores those pesky ‘.’ and ‘..’ fold­ers that show up in all direc­to­ries by default.) The unflap­pable Paul Red­mond helped me with the PHP code.
  2. Next, style them with CSS3 and beau­ti­ful, beau­ti­ful WebKit prop­er­ties. I com­mented my code so that you may find it helpful.
  3. Use the WebKit2PNG shell script to make back­ground images for all fold­ers in the direc­tory. This has to be done man­u­ally, but a smarter per­son could prob­a­bly set this up to auto­mate by port­ing the code from Python to PHP or other language.
  4. Add jQuery slider to adjust height and width.

Before you jump right to the demo, remem­ber that it works best in the lat­est ver­sion of Safari or WebKit Nightly, and works pretty well in Fire­Fox 3.5 or greater. Thanks for tak­ing a look. I hope you enjoyed it as much as I did.

View the work­ing demo.

Short URL: