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

When building a website, using a CSS framework is a real time saver as it provides you with tools every web designer needs when crafting a site. Some, like Bootstrap, are a bit bloated with excess code while others require a quite steep learning curve.

Ideally, you want to work with a framework that gives you just enough features to help you hit the ground running, while not weighing you down with a bunch of options you don’t really need or use.

Therefore, I have compiled a list of the 12 lightweight CSS frameworks than can help you get a fast start for creating beautiful, functional and super fast loading websites.

1. Spectre

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.

2. Avalanche

Avalanche is a framework that you can customise to meet your needs. There are available packages to enable specific features like a fluid grid system, offset classes, containers, vertical spacing and more.

3. Wing

Wing has everything you need to create a basic project is included, all in a 2kb file (minified + gzipped). On top of that, almost everything is styled automatically, without the need for learning specific classes. This allows for an intuitive experience developing with Wing, as it’s designed to be a boilerplate style sheet for any project.

4. Framy

Framy is a collection of basic components, you will need in every web project to develop responsive & modern interfaces and websites.

5. 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.

6. Look

The result of a personal project, Look was released to the public as a minimalistic CSS framework to serve as a basic starting point for site development, design elements are simple and can be customised to your liking.

7. Furtive

Furtive is a micro framework that is truly 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.

8. Milligram

Milligram provides a minimal setup of styles for a fast and clean starting point. Milligram comes in at only 2kb gzipped. It’s not about a UI framework. It’s specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.

9. Base

Base is a semantic, lightweight and extensible framework that allows you to create fluid and fixed grids with your own widths, columns, gutters, offsets and padding. It includes button, form and menu components, and also includes a collection of LESS mixins for CSS3 properties, animations, gradients and some utility mixins.

10. PureCSS

Pure is ridiculously tiny. The entire set of modules clocks in at 3.8KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

11. Chota

Chota is dead simple to use. It doesn’t require learning a lot of class names like other frameworks. It applies a few basic styles to the HTML following the HTML Semantics.

12. Lit

World’s smallest responsive css framework* (395 bytes gzipped and minified) Lit is the result of playing css “code golf” with Skeleton. As such, this framework strives to maintain all of the features that Skeleton and other similar frameworks offer, while working on older browsers as well. It has typography for h1-h6, and body text, three types of buttons, cards, inputs and table styles

Share

12 Lightweight CSS Frameworks for a Fast Start