Every mad scientist needs his Frankenstein. Mine just happens to be a website. Grunt Labs is my ongoing experiment, a place to play, test, and generally ignore browsers lagging behind. Grunt Labs is also a sign of things to come for the blog and Grunt, but more on that later.

So what is it really?

Grunt Labs is a repository for all my downloads(at least the good ones), projects, ideas, and general nuttiness I can come up with. Ever since I launched Checkmate I wanted a separate site where people could go get downloads and support. Grunt Labs will be integrated with Lighthouse in the future enabling issue tracking and all the goodness Lighthouse has to offer.

Playtime!

Grunt Labs is also a playground for me to stretch out my code and try out new things. It uses CSS3 and jQuery extensively and it is important to note this is an ongoing project. As I learn new things, better ways to code, and browsers evolve, the site will change and evolve into what I hope is ridiculously impressive.

The Design

The design is very basic and sparse. This is partly because of the crazy javascript going on and partly because the site is meant to change for each project. At this point the project pages don’t change much besides the background. That will change and vary from project to project.

The Code

The code consists of mostly basic html and CSS and the skeleton of the site was built on top of the Blueprint CSS Framework. Things get interesting when I mix in some CSS3 elements. To see the site in it’s full glory you’ll need Firefox 3 or a Webkit based browser like Safari.

Then comes in jQuery. My favorite javascript framework by far. This was my first push into the world of full page animation, and already I can see different ways of doing it. The page obviously uses some Coda style popups, full page animation, but it also uses some more subtle things. Some elements are dynamically added and removed via javascript. I’ve got plans for much more javascript in the near future, but that has to wait on something being released ;)

I think I’ll save explaining more about the javascript in detail for another post.