10 Lightweight CSS Frameworks You Should Know About

Web development has grown vastly in popularity over the last few years. There are many front-end frameworks that are being released every year. Bootstrap has been one of the most popular of the bunch. However, there are many other challengers that you may not have heard about but are definitely worth trying out.

In this article we take a look at 10 of the best frameworks you might want to checkout.

Spectre

Spectre is a modern, free and responsive CSS framework. It offers elegant elements, flexbox-based responsive layout system and CSS components and utilities, that can be modified with Sass and Scss compiler. It is really lightweight, only 10KB gzipped and has support for most modern browsers.

Mustard UI

This is an open-source, lightweight starter CSS framework. It is split into modules, and you can choose if you want to include all of them or only the ones you need. It comes with all the components needed for a front-end design like flexbox grid, buttons, tables, forms, cards and many more, and can be customized via scss variables.

Bulma

Bulma is a free and open source modern CSS framework based on the Flexbox layout model. It offers a simple grid system, responsive nav bars and versatile media objects. Every element in Bulma is mobile-first and optimized for small screens, and can be easily customized using modifier classes and variables.

UI Kit

This is another awesome CSS and JavaScript front-end framework, which comes with its own SVG icon font and a number of components. UIkit is designed very well, both in looks and as a framework, with unified styles, easy to remember API, many customization options, and useful modifier classes.

TentCSS

TentCSS is a simple and easy to use framework that offers all the basic components needed for building a responsive website. It is very lightweight (only 5kb gzipped), follows the BEM standard, and has a modern flexbox grid for doing layouts.

MaterializeCSS

This is a modern responsive front-end framework based on Material Design. It's really simple to use, especially to people familiar with other similar projects, such as Bootstrap. There is a collection of starter templates that that will help you to easily design your website.

Foundation

The Zurb Foundation framework is another popular tool for building responsive websites and apps. It comes with a number of modular and flexible components that are completely customizable, which you can use to design beautiful responsive websites that look amazing on any device.

Semantic UI

Semantic is a front-end framework that helps create beautiful and responsive layouts using human-friendly HTML. It is highly customizable with more than 3000 CSS variables that you can use for custom theming. Semantic highly responsive as it is built completely with 'em' values.

Base

Base is a lightweight, minimal and responsive CSS framework. It is built on top of the lastest Normalize.css and is split in independent modules so you can use only the ones you need. It is mobile-first and works great on all modern browsers including IE 10+.

MUI

This is a small and responsive framework that follows Google's Material Design guidelines. It has no external dependencies and is extremely lightweight, only 5.4kb gzipped. It offers React support, customization via SASS files, and has a separate inline version for styling emails.