Also featuring HTML5, CSS3 & jQuery
I got tired of the boring look of a standard Apache web directory. So instead of browsing folders the default way, I built a small index.php file in the root, grabbed all folders dynamically, injected them as HTML5 and styled them with CSS3. Since I work with Coda all day, I chose to emulate their Sites View interface. Coda is a great text editor/FTP client for Mac OS X. If you’re not familiar with Coda, check it out at Panic’s website.
About the Coda-fied web directory — my code is completely self-contained and portable. It also uses no images for style. All gradients are generated with the CSS3 gradient proposal, best supported by WebKit. The screenshot thumbnails can be generated dynamically. Below is a preview, and a few notes on how it’s made, and a link to the working demo.
Hover for alternate view.
Let’s get started.
- First we need to write the PHP grab all folders in the directory and create links from them. (Notice it ignores those pesky ‘.’ and ‘..’ folders that show up in all directories by default.) The unflappable Paul Redmond helped me with the PHP code.
- Next, style them with CSS3 and beautiful, beautiful WebKit properties. I commented my code so that you may find it helpful.
- Use the WebKit2PNG shell script to make background images for all folders in the directory. This has to be done manually, but a smarter person could probably set this up to automate by porting the code from Python to PHP or other language.
- Add jQuery slider to adjust height and width.
Before you jump right to the demo, remember that it works best in the latest version of Safari or WebKit Nightly, and works pretty well in FireFox 3.5 or greater. Thanks for taking a look. I hope you enjoyed it as much as I did.
Short URL: http://jwr.cc/x/1i
Leave a Reply