A Hand-Coded Designer CSS UI Kit

Web UI sets have been around for ages, but this takes things a step further. This free UI Kit is coded by hand using HTML5 and CSS3 so you can easily drop these elements into any project you're working on. This code is made to take advantage of modern browsers and to degrade gracefully in older versions of internet explorer, so no matter what your client or visitor is using they will be see an excellent design. Most major web elements are included -- buttons, tables, headings, etc -- and each of these is done in six color variations. Just pick the element you need, insert a few lines of CSS, and copy the HTML elements into your document. Full preview and instructions are below.

Preview

A screenshot of UI set is below, but to really see what this looks like you should take a look at the live preview.

How to Use

This HTML5 UI kit uses very few tweaks to work in all browsers and you can get started in just three steps.

Internet Explorer Compatibility

First, there are two important files that must be included for internet explorer to understand the HTML5 tags. You'll need to paste the following lines into your header to make this work in IE:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Include the CSS

Either copy the specific lines of CSS that you require from the included stylesheets, or just include the entire file. It's up to you :-)

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="ml-css-ui-kit.css" type="text/css" />

Insert the HTML

Finally, just pick the elements that you want to include and insert the included HTML into your existing document.

<div class="button-wrapper">
	<a href="#" class="button light">Lorem ipsum</a>
</div>

That's it! Your new design elements should now be displaying beautifully.