Another Design Sun, Feb 6, 2011

It has already been a few years since this site has seen any kind of update (or much content for that matter). Every time I start this I think to myself keep it simple and by the time I’m done I have a style sheet longer than the constitution. Well that still may be the case, but at least this time I didn’t write it.

As a huge fan of JQuery and the related user interface elements of JQueryUI , I decided to start off by only using these components. If the resulting layout was not to my liking then I would begin adding my own CSS. What happened next was a near miracle.

First I deleted my style sheet and removed all style markings from my templates. Then went through and updated the layout using YUI3’s grids, strolled through the templates adding only the standard classes that come with JQueryUI, and added a few extra style helpers here and there for padding and margins. POOF Instant web site.

My style sheet remains empty which is about as low maintenance as you can get.

There are still a few items that need some attention. What fun would it be to get it all done at once?

I did have enough time to rollup all the css files into one in accordance with one of Google’s Let’s make the web faster tips. So instead of making 4 or 5 separate requests for files there is just one. Even if the files are cached the browser will still ask “Has the file changed?” which takes an additional round trip. Less round trips makes the page load faster.

For rolling up the files I created a really simplistic Makefile to help me out. In the Makefile I use Yahoo’s YUI Compressor to minimize the files. It simply removes the comments and white spaces squashing everything into a big one line file. Less bytes! Here’s the quick Makefile

Not perfect, but it works.