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

When building a website, using a quality responsive CSS framework is a real time save as it can give you a nice head start on any web design project. But as you know, loading speed is important quality factor as some, like Bootstrap, are a bit bloated with excess code while others require a steep learning curve.

Ideally, you want to work with a framework that can give you just enough features to help you hit the ground running and while not weighing you down with so many options you don’t need and would probably will never use.

Today, I have collected a list of  15 Responsive & Lightweight CSS Frameworks to help with a fast start creating beautiful, functional websites.

1. Emerald

Emerald is an opinionated responsive grid system written in LESS, it’s a block-element based (as opposite to floats) and is written with OOCSS methodology using BEM syntax.

2. Spark

Spark is a lightweight web design framework based on the mobile-first approach to responsive web design. Using media queries powering a responsive grid, Spark makes it easy to build professional looking pages in minutes.

It’s designed to be simple to use with intuitive class names and easy to customize with a nonintrusive approach: with the exception of some basic styling and resets, you only add Spark classes to the elements you actually need styled.

3. Mini CSS

mini.css is a lightweight CSS framework, designed with mobile devices and modern browsers in mind. It’s easy 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.

4. Dead Simple Grid

Dead Simple Grid is a responsive CSS grid micro framework/concept by Vladimir Agafonkin (creator of Leaflet) that is just that. Dead simple. It’s the Malevich’s Black Square of grid frameworks.

5. Siimple

siimple is a light, responsive and open source framework for design flat and clean websites. It has built in SASS/SCSS and provides a clean starting point for your web design.

6. Fluidity

A fully responsive css framework that is impossibly small as HTML is almost 100% responsive out of the box. This stylesheet patches the remaining holes to get to 100% and in just 247 minified bytes. Let’s make the web just a bit more responsive shall we?

7. Base

Base, is a rock solid, responsive HTML/CSS framework that is lightweight and has minimal code. You now can spend less time overriding styles and focus more time on creating beautiful website applications.

8. Beauter

Beauter provides a minimal range of beautiful elements and styles in pure vanilla CSS which makes it easier to start with a cleaner and faster development. It’s Mobile First, responsive across various devices with a very small footprint, 4kb gzipped!, which makes it faster.

9. InvisCSS

InvisCSS is designed to bring you the core of a good CSS library without the cruft. That is, it’s not filled with styles that are only used by developers and designers for their own websites. The default styling is minimal so that it’s easier to extend and modify, by you. Unlike bootstrap and most CSS templates, which requires a developer to excessively ‘opt-in’ by specifying classes all over the place, InvisCSS uses a few simple ‘opt-in’ classes at the base of an HTML branch. InvisCSS is for real sites:

10. Taffy

Taffy is Open source, lightweight, modern CSS framework built with Flexbox. It’s basically a fresh new take on a Flexbox CSS framework built with only the essentials, so you can get started with web design!

11. Spectre

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

12. Kernel

The kernel.css framework is a unintrusive, lightweight and semantic CSS and JavaScript framework inspired by the material design spec. It uses prefixes for all it’s classes. It’s meant to be a foundation to your projects, and not a complete product.

13. Milligram

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It’s not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

14. Vital CSS

Vital is a minimally invasive CSS framework for modern web applications, built with Sass, the preferred CSS preprocessor of today, no ridiculous amounts of classes or nesting. No excessively buried code as the total size of just 23 KB minified or 6 KB gzipped, Vital loads and renders quickly.

15. Look

Look is the result of a personal project, It 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 customized to your liking.

Share

15 Responsive & Lightweight CSS Frameworks