Pure CSS UI kits, or user interface kits, help web designers like me to design fast loading, modern looking websites and apps without much effort or time consumption. And all of these are free.
After these UI kits, we do not need to use any icons/images or jQuery based UI kits to create good looking websites. CSS alone is enough these days.
These CSS user interface kits work beautifully on all mobile devices and computers without putting too much load on the device. These are also fast-loading and search engine friendly.
You can use these UI kits independently or you can use them with a CSS framework of your choice.
By the way, if you like pure CSS resources, you should also check out this collection of pure CSS icons.
If you think I’ve missed a resource, please do share it in the comments section below.
Free CSS UI Kits
Pure is the latest and one of the most popular CSS UI kits out there. It includes a wide range of elements. It can take care all of your user interface needs in a website or web based app. This is not just a UI kit but a whole framework in itself.
It’s so nice to see that the upload button does actually work. This is something we don’t usually get in CSS UI kits.
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. It comes with 6 color variations.
Metro is a bootstrap based UI kit that has additional option for including jQuery effects. A built-in jQuery file comes along with the CSS UI kit and you have the option to use it or avoid it.
This UI looks absolutely amazing. But of course, some amazing stuff comes at a price. Here, the price is images. This UI kit uses images to give out these sweet results.
Even though Gumby is a full fledged CSS framework but it does include a brilliantly designed pure CSS UI kit. That’s the reason I decided to include it in this list.
I have personally used this UI kit. It works nicely in almost all of the browsers. Another thing I really liked is that all of the styles are cataloged in a neatly in CSS comments.
The kit is based on Xcode components on OS X Lion. Since the kit is for prototyping OS X apps, it’s mainly made for Webkit, but should work mostly fine in any browser that supports gradients and flexboxes.
You can edit it live but the amount of elements is pretty limited.
This is a set of dark UI elements but like the one above, it also doesn’t include a large collection.
This is a new freebie. I have never used this one but it does seem intriguing enough so I will use it in my future projects. If you have tried it, please share your opinion in the comments.
That’s it for tonight everyone. See you tomorrow.