A Hand-Coded Designer CSS UI Kit

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.


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


click for 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" />

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>

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

License, Usage, and Sharing

You are free to use this resource for personal or commercial projects with attribution to MediaLoot, under the following guidelines:

  • Please link directly to this article for all sharing of this resource.
  • You may not resell this set or any derivatives works from this set.
  • You may not upload this complete resource to another website or offer it for download on another website.


Designer CSS UI Kit

Like this free resource? There’s a lot more where that came from.
For every free resource we release, members get dozens more. If you like this set, why don’t you browse through our other resources, or take the tour to learn about our membership.

(read full article on source site)