A Hand-Coded Designer CSS UI Kit

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.