iWebSkel: The Ultimate Website Skeleton
on May 14, 2009
When you start implementing a website design in the modern world, you seldom begin from scratch. Many of the Javascript frameworks, for instance, are part of everyday work for many web designers. The same happens for CSS initialization rules.
Sometimes is just boring to create the directory skeleton, just because it’s always the same. I know, I am a lazy one! That’s why I created iWebSkel, which is more for me than for the community.
However, I thought it was a good idea to share it. Let me know if you like it: feedback is always appreciated!
iWebSkel is the ultimate ready to use kit for website design. It features only the latest version essential components to start developing quickly using XHTML, CSS, and Javascript. Elegantly packed together.
Before iWebSkel
Suppose you are about to implement the design of a new website called foobar. Here is what you do normally:
$ mkdir fooweb $ cd fooweb/ $ mkdir -p images/icons js style $ cd style $ edit style.css
At this point you realize that you need to reset style definitions. You code it and after having spent a few minutes you find out this Resetting Again: you have just thrown away your time.
Not too bad. You get back to your work:
$ cd ../ $ edit index.html
Same story. You have to write the code you write every single time. Isn’t that just annoying?
After iWebSkel
How do you do the same things with iWebSkel? Much more easy!
$ wget http://iwebskel.com/get $ unzip iwebskel.zip $ mv iwebskel foobar #Done!
What you do from this point on is just creation. No more repetitive typing. But there is more!
You have all the best icons at your disposal, style is already reset, and a nice HTML template is ready to be filled.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="distribution" content="global" /> <meta name="robots" content="follow, all" /> <meta name="language" content="en" /> <!--meta--> <meta name="keywords" content="" /> <meta name="author" content="iWebSkel: The Ultimate Website Skeleton! By Federico Maggi http://iwebskel.com" /> <meta name="description" content="" /> <!--style--> <link rel="stylesheet" type="text/css" media="all" href="style/main.css" /> <!--behavior--> <script type="text/javascript" src="behavior/scriptaculous/lib/prototype.js"></script> <script type="text/javascript" src="behavior/scriptaculous/src/scriptaculous.js"></script> <script type="text/javascript" src="behavior/main.js"></script> <!--google analytics--> <!--CODE--> <!--feeds--> <!--CODE--> <title>Title</title> </head>
And what about JavaScript? Same story: the two best frameworks are just right there along with a nice event handling template:
/* Example - main.js */
Event.observe(window, 'load', function() {
//event handling goes here
});
To conclude, let’s take a closer look a the directory tree:
$ find iwebskel -maxdepth 2 iwebskel iwebskel/behavior #js files go here iwebskel/behavior/main.js iwebskel/behavior/mootools iwebskel/behavior/scriptaculous iwebskel/design #design sketches go here iwebskel/images #site images go here iwebskel/images/icons #tons of icon packs already here iwebskel/index.html iwebskel/style #style files go here iwebskel/style/images #style images go here iwebskel/style/main.css iwebskel/style/reset.css
—Federico
Comments
One Response to “iWebSkel: The Ultimate Website Skeleton”
Very good idea.
Sounds promising, let me download.
Though I prefer jQuery.