How to implement a UI Kit into a website?

Question

I have a psd version of a UI Kit that I would like to implement into the forms, etc, on my website. It's similar to the one below - which is "Chutzpah" by Morgan Allan Knutson (@rnorgan)...I'd show mine, but I don't have a screenshot. This will demonstrate the same concept, though.

image from http://designmoo.com/2435/chutzpah-user-interface-kit/, where you can download his kit.

What tools do I need to utilize to do this? Can I do it simply with CSS, or do I need to use some client side scripting? Or, is this something that is really just for mobile applications?

Answer 1

Essentially, the design part will be done in CSS; some of the elements you show can't be fully styled in their native browser represenations however (like <select>), so you will need the assistance of JavaScript-powered widgets that allow for more design freedom.

Maybe jQuery UI (which is a set of jQuery-powered widgets and surely one of the best UI tools around) is interesting for you. It is completely themable and even has a tool for building your own themes, ThemeRoller. It will not be enough for every aspect of your implementation, but may provide a good starting point.

Note that using jQuery UI comes with dependencies (jQuery) and limitations (no other JS library should be used on the site).

Whichever road you take, be prepared for a lot of fiddly work.