Back to main page

Lightweight and Versatile CSS Libraries

A list of versatile CSS libraries that provide just enough foundation to get started, but are not too opinionated to get in the way. The css libraries in this list do not include Javascript, so they are not as robust as Bootstrap or Material, but are framework agnostic and can be plugged into most projects without any major conflicts.

Bulma

This is my favorite CSS library currently, so I may be a little biased! Bulma is an open source CSS library (named after a dragon ball z character) that has recently picked up a lot of popularity. If you’re looking for a robust CSS library with no javascript, look no further! Since this library does not rely on javascript it can seamlessly work with most popular frameworks. The access to SASS variables allows it to be highly customized in a modern setup. I use it for a lot of MVP projects where I need foundational styles that I can use out of the box, but I am able to add a lot of customization to once the UI needs a brand specific update. I find Bulma to be especially helpful at startups, where a designer is hired later on and wants very detailed stylistic changes.

Skeleton

Just as the name implies, this CSS library gives you the bare bones (pun intended) elements to work with. I enjoy using this library for small scale projects where I need some foundational components, so I don’t have to reinvent the wheel, but don’t want a lot of bells and whistles added on. Their documentation is straightforward and easy to use. If you’re creating a small project, a demo, or a proof of concept and need a few things like a grid system, button and input fields styling, or typography already set up, you should definitely check out Skeleton. I’ve used this at hackathons where I just needed to build a small app to demo and didn’t want to deal with a large UI kit or css framework while rapidly coding.

Pure.css

Pure.css is my go to for vanilla HTML, CSS, Javascript projects. It has a few well made HTML elements that can be customized by overriding the built in style classes. It’s very lightweight and includes normalize.css to fix any cross-browser compatibility issues. I use this more for websites that will be built once with little maintenance than web applications that will grow or require constant maintenance. You can use Pure with Javascript frameworks as well, but I find Bulma to be more versatile with customization and find myself leaning towards using that if I need access to sass variables. Pure has a good following and keeps its package up to date. If you are concerned with cross browser compatibility and just need a few html elements to get started this is a good library to check out.

Milligram

If you need something similar to Pure.css, but in a much smaller bundle Milligram might be a good fit. They have a few more options than Pure.css, but have not been around as long and have a few more open issues. Milligram is worth a mention in the list, but not really my go to for any projects unless I need something with a very small bundle size.