There are many good css frameworks available but not all of them are lightweight. Lightweight css frameworks are not only going to make your website faster but also helps to improve overall performance. Therefore it’s better to adopt a lightweight framework for your next project. So in this post i will share some most popular and lightweight css frameworks with their features.

What is a css framework?

A css framework is a simple css(can consist javascript files also) file with pre-styled classes. So that we can use that classes in our markup. While there are many good frameworks available but the most popular of all time is bootstrap.
Bootstrap is good as it provide many built in components but its not that lightweight. So don’t worry i have made a list of frameworks which are lightweight but has much to do with.

Lightweight css frameworks

css frameworks

Choose a perfect framework according to your project is quite tough. Day by day web design is improving and many new tricks,techs are developing. So before you choose a framework you must check out its capabilities. But don’t worry the list of lightweight css frameworks will help you with it.



Bulma is a flex box based modern css framework with more than 19,900+ stars at github. If you are familiar with css3 then you may know how popular flex box is. Its become so much popular in a short span of time. Its one of the best competitor of bootstrap and by default it doesn’t need java script. If you ever work with bootstrap before you may know it has a js file which needs jquery. Therefore you have to use jquery for bootstrap but there are far better options available than jquery.

So bulma will be perfect choice if you love flexbox and don’t want to use jquery.

You can check out their official website here. They have made a well documentation also.



Spectre is also a lightweight css framework, use it as a starting point of your projects. It provides flex box based, responsive and mobile-friendly layout. It has everything you will ever need for your modern web design projects. While its just released recently but still has 4900+ stars at github.

So if you want less complication and faster workflow then choose it over others. I am sure you will definitely love to explore the features of Spectre.

They also have a well maintained documentation, check it here.

Pure css

pureFirst of all pure is the most lightweight framework developed and maintained by yahoo. Actually its not like a framework but it provides a set of modules. It doesn’t have much components it just provides base,grid,forms,tables,menus and buttons. The entire set of modules is just 3.8KB* minified and gzipped. While its much small in size but made with mobile in mind. However if you are working on a small project or want to start from scratch then pure will be the best choice. It will definitely make your website lightning fast.

You can check out their official website here. Pure is much popular too with more than 17500+ github stars.


skeletonSkeleton is not a framework it’s a boilerplate but isn’t less than any framework. It provides a base structure for your project and helps you to accomplish the task faster as much as possible. You don’t have to worry about typography,tables,grids,buttons. Its surely one of the best boilerplate available out there.

Finally i would say if your project is small but needs modern look then definitely choose it. Don’t worry about its community support because it has already got 14700+ stars.

You can check there official website here.

Kube css

kube cssKube is another lightweight framework with some built in components. It performs really well and supports almost all latest design concepts. So you can surely use it in any medium scale project. The only minor drawback of kube is to use its components you have to include its java script file. While its much popular at github with 1180+ stars.

Anyway they have a well maintained documentation, you can check it here.

Finally the list has come to the end. I hope this post will help you to select the framework of your choice for your next project. So if you guys like this post then share with your friends and let them know about it.

Categories: CSS


Subham Mitra

Subham Mitra is a full-stack developer as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.



Nawaze · October 14, 2017 at 12:39 am

Hey man, thanks for this. I want to try this on my blog.


Bob Sanderson · February 26, 2019 at 4:51 pm

These are great tips. Thanks to the author for a great post!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.