Free Libraries, Toolkits and Frameworks for Web Designers

Are you a web or front end designer? If yes, then you have reached the right place.

We designers need to keep polishing and fine-tuning our skills. We need to do it because this field is evolving at a dramatic pace.

Since the art and science of we designing is evolving, the tools and techniques keep on changing as well. And here at Designzzz, we keep on sharing these new tools and techniques.
Today’s article is about the newest of those tools.

This is a collection of free CSS libraries, JavaScript libraries, toolkits and a few online tools which came out in 2015 & 2016. These are all free resources, and most of them are open source. Enjoy!

This article contains:

  1. CSS Libraries
  2. Javascript Libraries
  3. Responsive Frameworks

CSS Libraries, Toolkits, and More

Pure CSS Loaders

We often use JavaScript loaders but wouldn’t it be great if we could do that using only CSS?

Pure CSS Loaders

Pure CSS

This is a minified CSS framework for creating mobile app UIs. I haven’t been able to use it, but I’ve heard good things about it.



Even though it is still in beta, I love the results. It is truly responsive, contains nice animations and it is extremely lightweight.


CSS Plus

This is an impressive layout scaffolding based on Flexbox. It works across all major browsers.

CSS Flexbox

CSS Stats

When we’re coding, we often forget to check how many rules we have made and how lengthy or complicated the code is getting. This tool helps us keep things in order.

CSS Stats


I have featured Pushy in my earlier posts as well. That’s not because it creates any jaw-dropping results but rather its simplicity and effectiveness.


Transform Icons

Animation is everywhere these days. So let’s kick off the icons section with a few animated ones.

Transform Icons


Earlier in a post, we shared lots of pure CSS icons, but since this is a really great resource, I had to feature it here as well.

Icon8 is a CSS library

File Icons

They say great designs are transparent. These file icons seem like they would become transparent.

File like icons

JavaScript and Other Libraries


This is a JavaScript library just like jQuery but this one claims to be manifold quicker.



As you know, I like lightweight stuff. This is a lightweight dependency-free library for lazy loading.

Layzr.js for lazy loading


This is a framework for creating fully interactive SVG widgets.



Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs.


Item Slide

This is a simple touch-based carousel but it is extremely lightweight.

Item Slide


This is a simple set of animations. It contains more than 50 lightweight animations.



Smiley.js is a script for rotating smiley faces on your site to the correct viewing angle.


Facebook Pop

This is a gif image. Keep looking at it for a few minutes. FB Pop is an animation library exclusively made for mobile apps. Since Google material design says animations are good, we need such libraries.

Facecbook POP

Octave Sound Library

For delivering a great user experience on mobile devices, we need to make use of sounds as well. Sounds are important in mobile app design because they grab attention and enhance the interactivity and UX overall. And this is where Octave comes in. It’s a free library of UI sounds.

8ve sound library

Responsive Frameworks for 2016


Instead of starting with a framework, I’m starting with an anti-framework. If you wanna avoid using a big framework, then this is the thing for you.


Jeet Grid

This is a brand new grid system and I have found it really intriguing. I’m placing it at the beginning of this section because I think you guys need to check this one out.

Jeet Grid

This framework lets us create web applications in a very very flexible way.

Flexible Grid

Wee Front-End Framework

This is a responsive framework. It is used for logically building complex projects. Yet, it is incredibly lightweight.

Wee Framework


This is probably the best framework for creating gulp projects.



This is a framework made following Google’s Material Design guidelines.



LumX has already become the most popular material design framework of them all.



This is one of my favorite HTML-based mobile app frameworks because it contains no bloat stuff. It is an incredibly simple and lightweight framework. Another good thing is that it uses Chromium at its core so I can get latest HTML5 APIs working.


Random Stuff

I couldn’t figure out where to put these tools, but I couldn’t just leave them out. So here’s some random stuff.


This is an open-source script for Adobe Illustrator that converts your Illustrator documents into HTML and CSS.


Pie Menu Generator

It generates pie shaped menus. Simple.

pie menu

That’s it guys. Hope you like my effort. I’ll be back tomorrow with a similar post. Don’t forget comment and send your feedback.

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved