When creating when websites web designers and developers often use CSS frameworks to save time. If you’re a designer or a developer, you’re likely familiar with the most popular frameworks, Bootstrap and Foundation.

But the trend in recent years has been to reduce the size of the files needed in these CSS frameworks. In this post, we’ll outline some of the most popular lightweight CSS frameworks that you can use on your website and web projects.

WHAT IS A CSS FRAMEWORK?

A CSS framework is a software framework written primarily in CSS that lays out the basic framework of a website. It usually contains an underlying grid, typography, primary colors, buttons, forms, and other layout components that are useful to have when building websites.

Frameworks are designed to be used and changed, which means that it acts sort of like a toolbox. They give you everything you need to build a website, but you can update things and change elements as you like along the way.

WHY SHOULD YOU USE ONE?

CSS frameworks save time. By having most of the essential elements of a website laid down from the start, designers and developers are free to focus on layout and the minor tweaks and changes that make a website unique.

This allows for the saving of a lot of time when developing a website. Instead of laying out all of these components and styles manually, these frameworks allow for a massive reduction in development time by letting you use the default prepackaged styles they provide.

Using a CSS framework also helps to limit the fears you might have about cross-browser compatibility. Most frameworks are designed to work in all of the major web browsers and are developed by people who know how best to make websites look a certain way in those browsers. That means you don’t have to spend as much time worrying about how your site looks outside of Chrome, and you can instead focus on getting the site to look like your client expects.

These frameworks also can serve to help teach some valuable CSS, show you how to use a grid-based layout properly, and come with excellent documentation to help lay the groundwork for your websites and projects.

WHICH ONES ARE THE BEST?

We’ll go over the top 5 lightweight CSS frameworks, and what makes them the best options out there today.

BULMA

Bulma isn’t the most lightweight, but its styles and 20kb footprint make it certainly noteworthy. Bulma has a mobile-first approach, and its grid is built with Flexbox. This makes it very easy to lay down a grid, and the modern styles that Bulma provides look good out of the box, making this a great framework for people who don’t want to do much extra styling.

BOOTSTRAP

You might not think Bootstrap deserves mention on this list, but its size of only 20kb and its versatility and popularity make it one of the best options out there for a lightweight CSS framework. Bootstrap is by far the best CSS framework, and if used appropriately it is quite small.

PURE CSS

The entire set of modules clocks in at 3.8KB* minified and gzipped. This framework is small! It’s also got some great styles that make it look modern out of the box. This is a great framework for customization. Pure’s design is un-opinionated, minimal and flat. They hold that it is easier to write new rules than to update existing ones. By changing just a few lines of CSS, you can customize Pure’s appearance to work with any website or project as you need.

PICNIC CSS

Picnic is also very small but has everything you need to build a great website. It’s got some great styles that will save you design time for sure. It also makes minor improvements to the native HTML elements to get a boost, so you don’t need to write presentation classes mixed with your HTML. Picnic is also modular, so you can easily change and test each part of the CSS as you’d like.

MILLIGRAM

This is a very light framework. Milligram gives you a small setup of styles for a fast and clean starting point. And it’s only 2kb gzipped! This framework was designed with performance in mind and encourages higher productivity with only a minimal amount of properties to reset which, results in cleaner code.

CONCLUSION

When creating when websites web designers and developers often use CSS frameworks to save time. If you’re a designer or a developer and you haven’t yet decided on, or are looking into new CSS frameworks, you should give one of the small and lightweight but modern looking CSS frameworks we’ve discussed a try.

By reducing the size of the framework you serve to your visitors you could increase the speed of your website, and by using a framework that follows modern design trends and development techniques you will improve how your site looks and perhaps unlock even more performance improvements in the process. There are a lot of great lightweight CSS frameworks out there, so give one a try!