23 Responsive And Lightweight CSS Frameworks

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarLint - Clean code begins in your IDE with SonarLint
  • talent.io - Download talent.io’s Tech Salary Report
  • fluidity

    The worlds smallest fully-responsive css framework

    Fluidity is a fully responsive CSS framework crafted for web designers who require an easy framework to express their ideas quickly. It is architectured using one of the best stylesheet language styluses. It now encompasses normalize.css, little typography, a grid system that can be used semantically or with in-line classes to create fluid-width and fixed-width designs. It is focused on developers who know css and want to use CSS3 features and write clean, reusable, and maintainable code.

  • vital

    Design Framework (by doximity)

    Vital is an open-source, lightweight CSS framework used for modern web applications. It is readable, no extra buried code, and scalable. Written mostly in em values, allowing for easy and consistent scaling. It is extremely lightweight and has a size of just 23 KB minified.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support. Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • vanilla-framework

    From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.

    Vanilla framework is a lightweight and Sass-based extensible CSS framework. It is designed to be utilized directly or by using themes to enhance or support its patterns. Vanilla includes a responsive CSS grid, basic HTML element styling, and a set of helpful core patterns and extensible utility classes. You can include the entire framework to access all styles or utilize it as per your project requirement. Vanilla is open source, which means you can contribute to it, upgrade it, and extend it. The entire source code is available on GitHub.

  • turretcss

    Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.

    Turretcss is another lightweight CSS framework designed to make responsive, accessible, and scalable CSS development easy. It is utilized for the rapid development of responsive websites.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Tailwind CSS is a utility-first framework; it can be used to build a website quickly for UI’s. It’s a utility-based CSS library that prioritizes practicality and speed above semantic and lean markup. We need to find out the use case of the project. Based on that, it’s straightforward to develop a website without writing your own style for it. Tailwind does have a default theme, nor does it have any built-in UI components. It has a pre-built widgets menu that is used for developing websites.

  • tachyons

    Functional css for humans

    Tachyons is also considered the best lightweight CSS framework which is crafted for web designing. It is readable, loads faster, and creates a fully responsive interface with almost negligible CSS. It has a set of different small modules which you can use together or separately.

  • Pure

    A set of small, responsive CSS modules that you can use in every web project.

    Pure.css is one of the best lightweight CSS frameworks. All the modules are packed in at 3.7KB minified and gzipped, equipped with different features. Pure.css is developed keeping mobile devices in mind. If you plan only to use one subset of these modules, you will end up saving even more bytes.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • Spectre.css

    Spectre.css - A Lightweight, Responsive and Modern CSS Framework

    Spectre.css is among the best lightweight CSS frameworks for the rapid and extensible development of websites. It is not only lightweight but also a responsive framework. All sets of modules are packed in 10kb gzipped. It is flexbox-based, gracefully designed, and has advanced elements and components.

  • Milligram

    A minimalist CSS framework.

    Milligram is also one of the best lightweight CSS frameworks. It provides a nominal setup of styles for a fast and clean starting point. All sets of modules are packed in 2KB gzipped. It is specially created for better performance and higher efficiency with fewer properties to re-initialize resulting in cleaner code. It uses FlexBox, a grid system, and follows a mobile-first approach.

  • Materialize

    Materialize, a CSS Framework based on Material Design

    Built-in 2014 by Google, Materialize CSS is the best lightweight CSS framework to design websites and Android web apps. Several Google products like YouTube, Gmail, Google Drive, and Google Docs are based on this framework.

  • Wing

    :gem: A beautiful CSS framework designed for minimalists.

    Wing is one of the most incredible, lightweight CSS frameworks created for minimalists. It is intuitive; therefore, we need to add the same in our project and everything is styled automatically. It is packed with many features, including styling for most elements, a grid, and few components, all in just 5KB. Wing has a modern style, and therefore it will give a quick start to your project.

  • HiQ

    A lightweight, progressive, high-IQ CSS framework.

    HiQ (A high-IQ CSS framework) is a lightweight and customizable CSS framework developed using various custom CSS properties keeping in mind all the latest CSS best practices.

  • Chota

    A micro (3kb) CSS framework

    Chota is a tiny super lightweight, simple to use, lightweight CSS framework where all sets of modules are packed in about 3Kb. It does not require any preprocessors, just add it within your project and start using it. It is very simple to extend due to CSS variables. It comes with plenty of components and utilities, like a magic 12 column grid. It has good semantics, can be switched easily to dark mode, and supports icons out-of-the-box as well. Similar to other lightweight CSS frameworks, remembering different class names is no longer necessary.

  • UI kit

    A lightweight and modular front-end framework for developing fast and powerful web interfaces

    UIKIT is not only lightweight but also a modular front-end CSS framework used for creating lively and impactful web interfaces. It gives the developer an entire collection of HTML, CSS, and JS components that are easy to use, customizable, and flexible.

  • Bulma

    Modern CSS framework based on Flexbox

    Bulma is a free, open-source framework based on Flexbox that comes up with ready-to-use front-end components and can easily be integrated to create beautiful and responsive web pages. It is one of the top lightweight CSS frameworks with the simplest grid system implementation, where adding and removing the columns can be done seamlessly.

  • avalanche

    A package based CSS framework. (by avalanchesass)

    Avalanche is regarded as one of the best lightweight CSS frameworks that create the foundation for a package-based CSS workflow. It is used to customize to meet your requirements for building websites. There are available packages to enable offset classes, fluid grid system, containers, vertical spacing.

  • SonarLint

    Clean code begins in your IDE with SonarLint. Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts