20 Responsive & Lightweight CSS Frameworks for a Fast Start

Using a quality responsive CSS framework can give you a nice head start on any web design project. Some, like Bootstrap, are a bit bloated with excess code while others require a fairly steep learning curve.

Ideally, you want to work with a package 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 need.

You might also like these Material Design Web Frameworks or these Open-Source WordPress Development Frameworks.

With that goal in mind, here are 20 CSS frameworks that provide the basics – without all the bulk.

FICTOAN

FICTOAN aims to be a great choice for those who aren’t fans of larger, more complex frameworks. It features a vivid color scheme, custom icons and lots of lightly-styled design elements.

FICTOAN

avalanche

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

avalanche

Beauter

At less than 5k compressed, Beauter certainly takes the challenge of being seriously lightweight. That doesn’t mean there aren’t features, however. You get the basics like a responsive grid, but also some extras like parallax scrolling, modals, tooltips and some nice containers.

Beauter

Vanilla Framework

Vanilla Framework is simple by design to give you a great starting point for your project. There are lots of containers and design elements included that look great own their own, but are also easily customized to match your desired look.

Vanilla Framework

Bulma

Based on CSS Flexbox, Bulma is a fully-responsive and modular framework that lets you use just the stuff you need. You get all the advantages of Flexbox, including columns and tiles that automatically resize themselves based on their number and viewport.

Bulma

Milligram

Milligram weighs nearly as little as its namesake – just 2k when compressed. It includes all the basics you’d expect and is designed to minimize the number of styles you’ll have to reset.

Milligram

InvisCss

InvisCss was built as an alternative to more complicated frameworks. The package features simple CSS selector names and a minimal, yet attractive UI.

InvisCss

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 customized to your liking.

Look

unlimitedGrid

Based on Sass, unlimitedGrid is a flexible, mobile-first grid framework. It’s modular, so you only have to use the features you need. Flexbox support is included and there are multiple grid variations to choose from.

unlimitedGrid

Vital

Billed as the “reverse approach” to larger frameworks, Vital is both lightweight and scalable. Built using Sass, you’ll find an efficient grid layout, custom buttons and loaders. Several useful layout styles are also included for things like photo collages, card containers and forms.

Vital

PowerToCSS

Based on the principles of SMACSS and DRY, PowerToCSS is a lightweight CSS framework that offers a rock-solid foundation to get you started quickly on your next web project.

PowerToCSS

Kouto Swiss

Kouto Swiss is a complete CSS framework for Stylus that gives you lots of mixins, functions and utilities to code faster, and also includes the power of the Caniuse website to make your stylesheets fit your compatibility needs.

Kouto Swiss

Muffin

Not a framework per se, but still worth mentioning, Muffin is a design focused front-end web template for reating static sites using SASS and Jekyll. Muffin takes advantage of common practices from Bootstrap, Boilerplate, inuit.css and other libaries to let you get straight into coding straight away.

Muffin

Furtive CSS

Furtive is mobile-first framework with a very small footprint. This framework doesn't worry about older browser versions, meaning that it can use ‘cutting edge tech’ like flexbox, SVGs, and limited vendor prefixing. It's also available in SCSS, CSS, and comes with a Gulp file for customizing the build.

Furtive CSS

Webplate

The Webplate framework includes everything from a robust responsive layout engine, to global button elements, customizable forms and support for IcoMoon icon fonts. It also comes with jQuery, Modernizr and Typeplate by default.

Webplate web Lightweight Front-End Framework robust responsive layout engine toolkit css html

Fluidity

Fluidity is perhaps the most lightweight fully-responsive CSS framework ever! The HTML is almost 100% responsive straight out of the box, and the 115 bytes CSS file fixes the 'almost' part. Can't get lighter than that.

/* FLUIDITY v0.1.0 @mrmrs - http://mrmrs.cc MIT
*/
/*
 Responsive Utilities

*/
img, canvas, iframe, video, svg { max-width: 100%; }

/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; }

Schema

Built on LESS, Schema is a responsive frontend UI framework that comes with an all-inclusive collection of CSS components (buttons, drop-downs, forms…) to help get you started quickly.

Schema less responsive frontend UI framework

Emerald

Emerald is a pragmatic responsive grid system in LESS. It is block-element based (as opposite to floats) and is written with OOCSS methodology using BEM syntax.

Emerald pragmatic responsive grid system LESS

Bijou

Bijou is a lightweight (<2 kb) responsive 10 column grid framework. It comes packaged with buttons, alerts, tables, navbar, and of course the grid.

Bijou lightweight responsive 10 column grid framework css

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.

Base is a semantic lightweight responsive extensible framework

Spark

Spark is a lightweight framework based on the mobile-first approach to responsive design. The framework comes pre-built with several color themes that are interchangeable, in both shiny and flat styles. Currently, the base colors are silver (default), blue, green, orange, red, purple, lime and dragonfruit.

Spark lightweight framework mobile-first responsive web design

Typebase

typebase.css is a minimal and customizable CSS typography boilerplate. The most important thing that typebase.css gives you is an enforced vertical rythm across most device screens, thus ensuring that the text across columns and long copy doesn't become uneven. Both Less and Sass versions are available.

typebase minimal customizable CSS typography boilerplate

Hoisin

Built with Sass, Hoisin is a simple responsive front-end mini framework that has been created as an alternative to more complex and bloated front-end frameworks. It purposely does not include any components, instead focussing on giving you an organised base from which you can create your own library.

Sass Hoisin simple responsive front-end mini framework

Cute Grids

Cute Grids is a mobile-first, 12 column responsive grid system that was born out of the frustration of today's large overbuilt frameworks that can be overkill for most projects and restrict the creativity of the designer.

Cute Grids mobile-first 12 column responsive grid system

Light but Mighty

The whole point of using a framework of any kind is to make your job easier. So going in and having to restyle a slew of CSS, or loading a bunch of scripts you’re not even going to use seems to go against all logic.

Using one of the more basic frameworks above can get you off to a fast start without all of the headaches. And, being that some of them use a modular approach, you are able to pick and choose just the items you need for a particular project. That’s more like it!

Comments

  • Ten Tackle

    May I suggest you also check out mini.css? https://chalarangelo.github.io/mini.css/

    It’s lightweight, it’s modern and it works really well.

  • karks88

    Thanks!

  • Yahoo pure.css is a good one too.

  • Maria Stervic

    mini.css is pretty great and the docs are amazing.