This article was published 6 years ago, therefore the contents of this post may be out of date.

CSS is one of the main components of today’s modern web development. CSS basically describes the style and design of front-end part of the website. Nowadays, developers mostly stick around the frameworks rather than native CSS due to efficiency and productivity.

There is also a wide range of CSS frameworks for designers and developers each with its specific capabilities and flexibility. The reason why CSS frameworks are being popular among designers and developers is due to its simplicity and straightforward learning process with excellent documentation.

There are a lot of advantages of CSS frameworks for designers and developers. It free up time by automating most of the messy tasks and provide stable groundwork, and it’s comes with built-in responsiveness and mobile friendly which makes your design even beautiful. Another important one is browser compatibility which most of the CSS framework relieves cross-browser concerns and helps a lot. Today I showcase 10 of the best frameworks you might want to check out.

1. Furtive CSS 

Furtive is genuinely mobile-first, and nearly all dimensions are done in rem. It also has a small footprint, cutting down on the bandwidth necessary for downloading CSS. Furtive is intended to be just that, furtive. It’s the perfect starting point to get your project up and running.

Furtive remains lightweight because it doesn’t preoccupy itself with older browsers. As a result, Furtive can use cutting edge tech like flexbox, SVGs, and limited vendor prefixing. It’s also available in SCSS, CSS, Stylus, and comes with a gulpfile for customising the build.

2. Mini.CSS

mini.css is a lightweight CSS framework which is under 7KB gzipped, mini.css designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customisation are some of the main features of the framework.

While accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox.

3. Mustard UI

Mustard UI is a complete CSS framework that is production ready out of the box. There is no need to customise the CSS if you don’t want to because it is head and shoulders above others in terms of the way that it looks and 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 customised via scss variables.

4. Simple Grid

Simple Grid is a 12-column, lightweight CSS grid to help you quickly build responsive websites, download the CSS stylesheet and add the appropriate classes to your markup. It’s that simple. Each column is contained within rows, which are contained within a container. The container is set to a maximum width of 960px, but you can edit without having to break anything.

5. Base

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

6. Bulma

Bulma is a modern, lightweight and design agnostic CSS framework based on Flexbox, including columns and tiles that automatically resize themselves based on their number and viewport. Every element in Bulma is mobile-first and optimised for small screens, and can be easily customised using modifier classes and variables.

7. Turret

Developed for design, turretcss is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.

8. Vanilla Framework

Vanilla Framework is a simple extensible CSS framework, built using Sass and is designed to be used either directly or by using themes to extend or supplement its patterns.

9. Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.

10. Milligram

Milligram is a lightweight and minimal CSS framework to build websites. Milligram is ideal for front-end developers that need a design agnostic framework.

Milligram includes typography, buttons, lists, forms, grids, tables and other basic elements. Also, it makes use of flexbox and include Sass files.


10 of the Best Lightweight CSS Frameworks For Developers