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
