CSS Frameworks
CSS frameworks provide a basic structure for designing consistent solutions to tackle common recurring issues across front end web development. They provide generic functionality which can be overridden for specific scenarios and applications. This greatly decreases the time needed to start creating applications and websites. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions.
Common features of CSS Frameworks are
- Grid for layout
- Styling for Heading, Lists, Tables, Images etc.
- Media Queries
- Components like Buttons, Input fields, Card, Carousel, Accordian, Nav Bar, Modals etc.
- Utility styles for Padding, Margin, Float etc.
Below is a list of CSS Frameworks,
Material Design
Google’s Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.
A modern responsive front-end framework based on Material Design
React components for faster and easier web development. Build your own design system, or start with Material Design.
React Toolbox is a set of React components that implements Google Material Design specification. It’s built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. The library harmoniously integrates with your Webpack workflow and it’s easily customizable and very flexible.
Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.
Material Components for the web
Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks. Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.
This project’s goal is to be able to create a fully accessible material design styled website using React Components and Sass. With the separation of styles in Sass instead of inline styles, it should hopefully be easy to create custom components with the existing styles.
Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.
Build beautiful apps with Material Design and Vue.js
Keen UI is a Vue.js UI library with a simple API, inspired by Google’s Material Design.
Material Design UI library for Vuejs 2.0
Material Design components for Angular
AngularJS Material is an implementation of Google’s Material Design Specification (2014-2017). This project provides a set of reusable, well-tested, and accessible UI components for AngularJS developers.
The AngularJS Material library is a mature and stable product that is ready for production use. Developers should note that AngularJS Material works only with AngularJS 1.x.
Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavours.
MUI is a lightweight CSS framework that follows Google’s Material Design guidelines
A front-end framework based on Google Material Design
Material Design for Bootstrap is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Daemonite’s Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4.
JavaScript and CSS components are based on Material Design specs
JAVAFX MATERIAL DESIGN LIBRARY
JFoenix is an open source java library, that implements Google Material Design using java components.
The combination of Material Design and Bootstrap that makes your web app more attractive, consistent, and functionally powerful.
Material Design version of Foundation Framework by Zurb
Material Design for Bootstrap 4. Bootstrap Material Design UI KIT.
This project aims to bring Google’s new Material Design to Ember. The goal is to encapsulate everything possible in Ember components. This project is packaged as an Ember-cli addon.
Bootstrap
Quickly design and customize responsive mobile-first sites with Bootstrap, , the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.
Easy to use React Bootstrap 4 components
With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world’s most popular front-end CSS library — Bootstrap v4.
Bootstrap 3 Components implemented by Vue 2.
Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem.
Bootstrap components written in pure AngularJS by the AngularUI Team
Bootstrap components, powered by Angular
A sampling of Bootstrap components as web components
granite-bootstrap is a wrapping of Bootstrap CSS as Polymer shared styles modules (i.e. inside
An ember-cli addon for using Bootstrap in Ember.js applications.
Foundation
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
The goal is to wrap every part of Foundation into re-usable React components following the framework’s best practices.
The best way to quickly integrate Zurb Foundation for Sites (6.4 or later) components with Angular 6 or 7.
This project is a port of the AngularUI team’s excellent angular-bootstrap project for use in the Foundation framework.
A boilerplate integrating Foundation for Sites and VueJS
Ember CLI Foundation 6 SASS
Bulma
Bulma is a free, open source CSS framework based on Flexbox and used by more than 200,000 developers.
React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js)
The Comprehensive Bulma UI Framework for React
Bulma components for Angular 9+
Angular2-Bulma is providing Bulma CSS Framework components to Angular developers for fast and easy development.
Ember Bulma is a collection of Ember components and services for Bulma, a modern CSS framework by Jeremy Thomas
Semantic UI
Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience.
Semantic UI React is the official React integration for Semantic UI .
Semantic UI Vue is the Vue integration for Semantic UI. It is highly inspired on Semantic UI React If you have used it already, you will find Semantic UI Vue’s API to be almost the same.
This is the official Ember library for the Semantic-UI modules.
Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components.
More Frameworks
Minimal, responsive, style-agnostic CSS framework
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
Susy is a lightweight grid-layout engine for Sass, designed to simplify and clarify responsive grid layouts without ever getting in your way. You can use Susy with floats, flexbox, tables, or any other CSS technique.
A set of small, responsive CSS modules that you can use in every web project.
You should use Skeleton if you’re embarking on a smaller project or just don’t feel like you need all the utility of larger frameworks.
A minimalist CSS framework
A utility-first CSS framework for rapidly building custom designs.
A Lightweight, Responsive and Modern CSS Framework.
Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications.
Lightweight and beautiful library
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.
A colossal low-level utility CSS framework for crafting beautiful and elegant user interface at an atomic level without writing a single line of CSS.
Build responsive, flat and clean web designs with the minimalist and flexible siimple CSS framework.
A modular CSS framework for truly flexible, accessible and responsive websites
Although the overall look and feel are most definitely inspired by Twitter Bootstrap, Cascade framework is not just another Bootstrap clone. Where Twitter Bootstrap puts its focus on delivering shiny user elements that can be dropped into any project and takes control of your project’s overall look-and-feel, Cascade Framework is intended to do the opposite. By splitting your CSS into separate files based on features rather than selectors as well as by implementing atomic design, Cascade Framework puts you in control!
A design system for enterprise-level products. Create an efficient and enjoyable work experience.
Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
PrimeFaces is a popular open source framework for JavaServer Faces featuring over 100 components, touch optimized mobilekit, client side validation, theme engine and more.
Open source modular CSS toolkit providing great structure for building websites quickly
As a complete and self-sufficient web framework, Kube is here to help you get the most out of your daily work. Kube takes care of routine stuff, saving you precious time for things that you love. Starting up with Kube is ridiculously fast — you can start in under a minute.
A forward-thinking, lightweight, CSS microframework. Minimal by design.
A LIGHT CSS FRAMEWORK
A small (~1.8k) and powerful css library for the responsive web
A lightweight CSS library that provides a set of predesigned elements useful for rapid web development.
Helium is a frontend responsive web framework for rapid prototyping and production-ready development using HTML5 and CSS3.
A GORGEOUS CSS FRAMEWORK FOR THE WEB.
A fully responsive CSS framework for modern browsers
Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
A modern CSS framework for developing powerful web interfaces faster and easier.
Build beautiful, unique interfaces without reinventing the wheel. Let a17t provide the core building blocks, then customize with ease.
Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
An adaptive CSS grid system.
Karma CSS is a great starting point if you only want a barebones boilerplate. Includes All fixes from Normalize.css for supported browsers, a powerful mobile-first flexbox grid system, all base styles and the ability to customize the defaults for most of the styled elements.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
The small CSS file that makes wonders
Compass is an open-source CSS Authoring Framework.
Blueprint is a CSS framework, which aims to cut down on your development time.
A strong, independent CSS Framework. Only 2.7KB minified & gzipped.
The smallest and lightest SCSS library
CSS Grid Systems
A grid system based on the flex display property.
React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.
Muuri is a JavaScript layout engine that allows you to build all kinds of layouts (no kidding!) and make them responsive, sortable, filterable, draggable and/or animated.
Responsive React grid system built with styled-system, with support for styled-components and emotion (previously called grid-styled)
The Toast framework is a grid. That’s it. Soon, it might have type styles and whatnot, but its power is in its highly customisable design.
A lightweight and flexible Sass grid
A CSS grid framework using Flexbox.
Just a Flexbox Grid System
Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps.
Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns.
A CSS grid framework built on SASS to provide an automatic responsive grid for web developers with flexibility for manual control when needed.
The minimal (~100-170 bytes) grid system for modern browsers.
A Declarative Flexbox Based Grid Framework
A lightweight, responsive CSS grid
FancyGrid - JavaScript grid library with charts integration and server communication.
SlickGrid is an advanced JavaScript grid/spreadsheet component
CSS Animation
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Ultra high-performance, professional-grade animation for the modern web
Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
Some CSS classes to move your DOM!
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
A Library to Raise your Web Design without Coding
Useful infinite CSS animations that you can drop into your project.
A Sass library for creating flexible CSS transitions and animations.
a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power
EDITABLE CSS3 ANIMATIONS CALCULATED USING SCIENCE
References:
- 10 Best CSS Frameworks for Front-End Developers
- awesome-css-frameworks
- 9 open source CSS frameworks for frontend web development
- 11 Best CSS Frameworks To Look Forward In 2020
- 10 best CSS frameworks in 2020
- 6 Popular CSS Frameworks to Use in 2019
- CSS Frameworks Or CSS Grid: What Should I Use For My Project?
- 12 Small CSS Frameworks To Use In Your Web Designs
- What is the best CSS framework?
- 100+ Best CSS Frameworks For Responsive Design
- CSS Frameworks
- What are the Best CSS Frameworks?
- 11 Material Design UI Component Libraries for 2019
- 9 Bootstrap UI Component Libraries for React, Vue, Angular in 2019
- 13 UI Grid Systems and Libraries for 2019: CSS, JS, React and Friends
- 9 of the Best Animation Libraries for UI Designers
- CSS Animation Libraries
- What is a CSS framework?
- CSS Front end Frameworks