List of awesome CSS frameworks

In this article I would like to share with you the list of CSS Frameworks that support Website design.

List of awesome CSS frameworks

Base / Reset / Normalize

  • normalize.css - Modern, HTML5-ready alternative to CSS resets.
  • sanitize.css - The best-practices CSS foundation.
  • minireset.css - Tiny modern CSS reset.
  • inuitcss - Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.
  • modern-css-reset - Tiny little reset that you can use as the basis of your CSS projects.
  • ress - Modern CSS reset.
  • modern-normalize - Normalize for Chrome, Firefox, and Safari only (no support for Edge or Internet Explorer).
  • Natural Selection - Collection of best-practice CSS selectors.

Class-less

Frameworks that use semantic HTML and do not rely on classes.

  • Water.css - Just-add-CSS collection of styles to make simple websites just a little nicer.
  • MVP.css - Minimalist stylesheet for HTML elements.
  • sakura - Minimal classless CSS framework/theme.
  • Marx - Classless CSS reset.
  • Tacit - CSS framework for dummies, without classes.
  • awsm.css - CSS library for semantic HTML markup without classes, attributes, etc.

Very Lightweight

Frameworks that are smaller than ~5KB.

  • Pure - Set of small, responsive CSS modules that you can use in every web project.
  • Milligram - Minimalist CSS framework.
  • Picnic CSS - Lightweight and beautiful library.
  • Chota - Really small CSS framework.

General Purpose

  • Bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
  • Bulma - Modern CSS framework based on Flexbox.
  • Foundation - The most advanced responsive front-end framework in the world.
  • UIkit - Lightweight and modular front-end framework for developing fast and powerful web interfaces.
  • Spectre.css - Lightweight, responsive and modern CSS framework.
  • Primer - CSS framework that powers GitHub’s front-end design.
  • Carbon Components - Component library behind IBM’s Carbon Design System.
  • Fomantic-UI - Build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging.
  • Blaze UI - Open source modular toolkit providing great structure for building websites quickly with a scalable and maintainable foundation.
  • PatternFly - UI framework for enterprise web applications.
  • Base - Rock solid, responsive HTML/CSS framework.
  • turretcss - Responsive front-end framework for accessible and semantic websites.
  • Cirrus - Responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
  • HiQ - Simple CSS foundation with responsive typography and input styling.

Material Design

  • Material Components Web - Modular and customizable Material Design UI components for the web.
  • Materialize - CSS framework based on material design.
  • MUI - Lightweight CSS framework that follows Google’s Material Design guidelines.

Utility-based

  • Tailwind CSS - Utility-first CSS framework for rapid UI development.
  • Tachyons - Quickly build and design new UI without writing CSS.

Specialized

  • NES.css - NES-style CSS Framework.
  • 98.css - CSS library for building interfaces that look like Windows 98.
  • Gutenberg - Modern framework to print the web correctly.
  • Tufte CSS - Style your webpage like Edward Tufte’s handouts.
  • Bojler - Email framework for developing responsive and lightweight email templates.
  • TuiCss - Library to create MS-DOS interfaces.

Toolkits

Toolkits are closer to a library than to a framework. They do not provide actual styling but utilities (e.g. mixins) that you can use in your CSS preprocessor.

  • Bourbon - Lightweight Sass tool set.

Stalled Development

Frameworks that have not seen any real development for more than about one year or officially have been deprecated. We are keeping them here for reference/inspiration and hope for a revival.

  • Semantic UI - User interface is the language of the web.
  • Flexbox Grid - Grid based on CSS3 flexbox.
  • Basscss - Low-level CSS toolkit.
  • Neat - Lightweight and flexible Sass grid.
  • mini.css - Minimal, responsive, style-agnostic CSS framework.
  • Mobi.css - Lightweight, scalable, mobile-first CSS framework.
  • Wing - Beautiful CSS framework designed for minimalists.
  • Cutestrap - Sassy, opinionated CSS framework, a tiny alternative to Bootstrap.
  • unsemantic - Fluid grid for mobile, tablet, and desktop.
  • Propeller - Front-end responsive framework based on Google’s Material Design standards & Bootstrap.
  • Concise CSS - Give up the bloat. Stop tripping over your classes. Be concise.
  • Responsive Boilerplate - Powerful, accessible, developer friendly framework for building responsive websites.
  • Centurion - Web-based framework for rapid prototyping and building larger web projects.

Thanks for reading this article, if you are choosing a suitable framework for Website design! then we recommend using Bootstrap or Bulma.

Rating by author: