A CSS framework is a collection of CSS files containing predefined rules for layout, typography and other CSS resets. if you are a developer you might hear of terms like boilerplates, grid systems etc. Each one of them promising more than the next one. For the most part, they all refers to a collection of assets that are design to speed up the development.
CSS frameworks focused on responsive web design aspects. CSS framework cover all area of a responsive web development like typography, user interface layout etc. A good CSS framework may contain a grid system, Typography styles, CSS resets, layout models, and browser fixes. You don’t need to write a code from scratch, frameworks will provide codes for basic elements.
The main advantages of using a CSS framework are,
1. It saves a lot of time in the development process.
2. They are famous for browser compatibility.
3. CSS frameworks promotes grid based layouts.
4. Great for responsive web design.
5. It helps to learn css.
See also : 250+ jQuery & CSS3 Hover Effects (Plugins & Tutorials)
There are many popular front-end frameworks are available like bootstrap and foundation. That doesn’t. Mean they are only the best solution. Here we have put together the best collection of CSS frameworks. We have listed the best and useful frame works available based on their popularity and ease of use.
Frameworks Categories
Basis
A lightweight responsive Sass/CSS framework based on flexible box.
Aione Framework
Aione Framework is one of lightweight front end framework to make your HTML more beautiful. Aione Framework 1.0 stabled and flexible CSS framework.
Primal CSS
PrimalCSS is a minimal css framework designed to deploy responsive web projects. Is built to start small projects with a small css footprint that aims simplicity and performance.
Petal
Petal is a modern, light CSS UI framework developed at Shakr.
Tailwind CSS
A utility-first CSS framework for rapid UI development.
Framy CSS Framework
Framy is a free and very simple css-only Framework for developing responsive & modern websites.
Zap
Lightweight and scalable CSS Framework built for modern applications.
Unnamed
A colorful css framework made by a human not an Ai.
mini.css
A minimal, responsive, style-agnostic CSS framework.
Web Grid
Web Grid is a CSS grid based Grid system for easy web development. The minified Grid CSS weighs less than a KB.
Motus
Sass/css lightweight framework, built for speed and performance.
Chopstick Design Framework
Chopstick is a mobile-first responsive design framework.
Avalanche
Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system.
Bojler
Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients.
fusionCSS
Free, simple, responsive CSS framework built in LESS and easy to customize.
Evolution
A design system and functional CSS framework.
Wireframe
WIP – minimal wireframing css-framework.
Turretcss
Turretcss is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
Feather CSS framework
Feather is a minimal CSS framework and JavaScript Library to make websites that are as light as a feather.
Neckbeard
Neckbeard is an Atomic CSS in JS Framework.
Vanilla Framework
Vanilla Framework is a simple extensible CSS framework, built using Sass and is designed to be used either directly or by using themes to extend or supplement its patterns.
Baseui
Baseui is a very limited CSS framework. baseui tries to provide you with a minimal style setup that you can build upon.
Minimalize
Minimalize is a flexible Css micro framework,Based on the visual aspect, the framework offers you a clean and easy work.
Hive framework
A website development framework built with Grunt and Sass, and incorporating jQuery UI.
natUIve
15 KB feature-rich front-end framework.
USkin
USkin is a front-end framework which provides stunning web components based on CSS3 and ReactJS.
Based.css
Based is a barebones CSS framework for prototype or production. Based features an extensive flexbox grid system and OOCSS classes that don’t make assumptions about your application’s styles or override any browser defaults.
Plasma.css
A CSS grid framework based on Flexbox.
Sirius UI
Sirius UI is a Flexible CSS Framework based on Flexbox and VueJs.
Passionfruit
A very simple CSS framework to simplify the lives of web designers. Less typing, more drinking juice.
Cirrus
A fully responsive CSS and UI framework with custom design controls and simplistic structure. A components are customizable and work with your CSS.
Viu
Viu is a Meteor + Vue Material Design Framework.
Caramel
Caramel is a simple, modern, responsive website framework. Caramel is fully responsive, meaning you only need to write code once, to have the same results across multiple platforms.
Affixshape
CSS, Javascript framework for all designers arround the world.
Base-L
A well structured top down base css framework.
Clarity Design System
Project Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular 2 components.
Picnic CSS
A beautiful CSS library to kickstart your projects.
Themeblr
A powerful CSS framework boilerplate and Bootstrap 4 themes builder.
Yo
Yo Mobile First strategy is based on the design, development and use Sass CSS Framework, includes a lightweight, easy to use, configurable, strong expansion and other characteristics, but also adapted to the PC side of the advanced browser.
Bobrilstrap
Bobril wrapper of the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web – Bootstrap.
Beard
Beard is an extremely pragmatic and utility-focused CSS framework.
Tapestry
A CSS / LESS Dashboard UI framework created for Websilk, a drag & drop web development platform.
Materialrc
Materialrc is HTML, CSS, and JavaScript framework for developing responsive website/webapp.
Orion Framework
Orion is a mobile-first HTML/CSS/JS framework. It’s a simple, easy to use and quick way of getting your responsive web project off the ground.
Grid
Intuitive, easy to use, mobile first CSS framework based on Flexbox.
hack.css
Dead simple CSS framework.
Cutestrap
A sassy, opinionated CSS Framework. A tiny alternative to Bootstrap.
Spectre.css
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
Layers CSS
A lightweight, unobtrusive and style-agnostic, CSS framework aimed for practical use cases.
BlazeCSS
Open source modular CSS framework providing great structure for building websites quickly.
Cardinal
Cardinal is a modular, mobile-first CSS framework built with performance and scalability in mind.
Furtive
A forward-thinking, lightweight, CSS microframework.
Vital
A minimally invasive CSS framework for modern web applications.
Wing
A minimal CSS framework.
Surface
A Material Design CSS only framework.
SMaterial
SMaterial the Googles Material Design inspired CSS framework.
Bulma CSS Framework
A modern CSS framework based on Flexbox.
Milligram
Milligram is a minimalist CSS framework. Milligram provides a minimal setup of styles for a fast and clean starting point.
assemble.css
A scss framework based on a variety of other frameworks.
Han.css
Han.css is a Sass/Stylus and JavaScript typesetting framework featuring style normalisation to semantic elements, typography and advanced typesetting.
Stylistic
A new Stylus based CSS framework for those who love beautiful things.
Blaze
Open Source Modular CSS Framework. Blaze is designed to give you structure and a good starting point for your website.
Cascade Framework
Although the overall look and feel are most definitely inspired by Twitter Bootstrap, Cascade framework is not just another Bootstrap clone.
Baseguide
Baseguide is a lightweight and robust CSS framework powered by Sass. It brings together all essential base components in a small yet powerful package.
Stab CSS Framework
Responsive CSS framework focused on agility, grids, page design and mobile first.
Siimple
Siimple is a minimal CSS framework for flat and clean websites.
Minithematiq
A minimalist themable CSS framework.
Sky UX
SKY UX provides an HTML, CSS, and JavaScript framework to implement Blackbaud’s design patterns, along with the guidance to handle visual design and interaction patterns.
Bodoke CSS
Bodoke is a CSS/SCSS Front-end Framework created for supporting multiple grids in a single project. With a minimum of design, it’s visually clean from the scratch ready to be designed with your own identity.
Locaweb Style
Locaweb Style is a framework with CSS and JS patterns to build products admin interface.
Agile CSS
Agile CSS is a modern web framework specifically designed for building extensible and flexible Web UI for applications.
Responsive Cat
CSS Micro framework.
whipcream
A simple “classless” css framework.
Ice Framework
The Ice Framework is a modifiable and reusable system that can provide a basic structure for implementing fluid and accessible websites.
Sculpt
Sculpt is a free lightweight, mobile first, responsive HTML, CSS (and SASS) framework.
ember-cli-materialize
A CSS Framework based on Material Design made simple, for Ember.js apps.
Essence
Essence is a CSS framework that implements the guidelines from Google Material Design Specification using Facebook’s react.js library. Use it to easily build super-fast and great looking web & mobile interfaces.
Material Framework
Material Framework is a simple responsive CSS framework made by Tim Nguyen that allows you to integrate Material Design in any web page or web app.
Leaf
A CSS framework based on Google’s material design.
Materialstrap
Materialstrap is a HTML and CSS framework written from scratch built on the principles of Bootstrap but with the modern and sleek Material Design style.
Material CSS
A lightweight CSS framework based on Google’s Material Design.
Bootsnipp
Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework.
Cluckles
Cluckles Live Theme Editor for CSS Framework based on Less such as Twitter Bootstrap.
KNACSS
KNACSS is like a CSS style sheet “reset” on-vitamin that can start a project from scratch, taking into account general good practice (accessibility, performance, responsive webdesign).
Concise
Concise is a lightweight, front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve, and a high level of customization.
Bootstrap
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.
Foundation
Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.
Semantic UI
Semantic is a UI component framework based around useful principles from natural language.
UIkit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
Wee: Front-End Framework
Wee is an extensible front-end web development framework for building responsive websites using a Less CSS bootstrap paired with a powerful JavaScript library.
Metro UI CSS
The front-end framework for developing projects on the web in Windows Metro Style, created and supported by Sergey Pimenov (aka olton) with the massive support and involvement of community.
MUI – Material Design CSS Framework
MUI is a lightweight HTML, CSS and JS framework for sites that follow Google’s Material Design guidelines.
TukTuk
TukTuk is a responsive front-end framework that creates extensible sites easily.
Responsee
Lightweight, more intuitive and useful responsive CSS framework. Responsee is an open source responsive CSS framework based on 12-column grid. Websites based on Responsee are fully responsive – they display content correctly on each type of devices.
960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Skeleton
Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
HTML KickStart
HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10’s of hours on your next web project.
Kube Web Framework
Kube is one of the world’s most advanced and flexible frameworks. Kube helps you spend less time on routine tasks and more time creating amazing products. Focus on success, and Kube will cover the technology behind it.
Less Framework
Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
G5Framework
Web boilerplate stack (HTML5, CSS3, jQuery, and PHP). G5Framework provides some rock-solid code and functionality for you to start with, however it leaves all the remaining development and styling up to the developer.
Blueprint
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
YAML CSS Framework
YAML (Yet Another Multicolumn Layout) is a modular CSS framework for truly flexible, accessible and responsive websites. YAML is focussed on device independent screen design and provides bullet-proof modules for flexible layouts. This is a perfect starting point and the key to truly responsive design.
BlueTrip CSS Framework
A CSS grid-based framework born from the best parts of other frameworks, now with a life of its own.
52framework
First HTML5 and CSS3 framework.
Elastic CSS Framework
A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.
Baseline
Baseline is a framework built around the idea of a “real” baseline grid.
Pure
A set of small, responsive CSS modules that you can use in every web project.
Cascade Framework Light
A CSS micro-framework based on Cascade Framework.
Ink
An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping.
Kule CSS lazy
Kule is a CSS framework, working for reducing duplicate CSS design during development.
Responsive Grid System
The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.
Responsive
A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites.
Modest Grid
Modest Grid is an easy to customise grid framework that allows for the rapid development of responsive websites.
Materialize
A modern responsive front-end framework based on Material Design.
Schema UI Framework
Schema is a modular, responsive, front end framework to easily and quickly help you jumpstart your process in building complex interfaces for the web right out the box.
Kathamo CSS Framework
Kathamo is a Minimalist CSS Framework for Rapid & Mobile-Friendly Development. Kathamo has a few easy ways to quickly get started, each one appealing to a different skill level and use case.
Unsemantic CSS Framework
This is a fluid grid system for mobile, tablet, and desktop.
Tacit CSS Framework
Tacit is a primitive CSS framework for dummies, like myself, who don’t know anything about graphic design but want their web services to look eatable. No classes, no layouts. Just design plain and simple web pages compliant with HTML5 and they will look OK.
spaceBase
A Sass-based Responsive CSS framework. spaceBase is the front-end starter files for any new web project. It sets up your Sass architecture and normalizes your CSS and native HTML elements. It provides the structural groundwork for your application.
Base
A super simple, responsive framework built for all devices big, small and in-between.
Compass
Compass is an open-source CSS Authoring Framework.
Amazium
The responsive CSS web framework.
IVORY Framework
Simple, Flexible, & Powerful responsive web framework, Makes your web development faster and easier. It takes you all the way from 1200px on down to 320px.
Blackhole
Minimalistic but flexible and powerful SCSS / CSS framework.
Centurion
Centurion is a responsive framework built for speed, simplicity, and flexibility.
Kickoff
A lightweight front-end framework for creating scalable, responsive sites.
SkyBlue CSS Framework
SkyBlue is a minimal framework that is meant to be starting point for my projects.
- 477shares
- Share on Facebook
- Share on Twitter
- Buffer
Great! Thanks
Hey! I’m the author of Cluckles. Thanks for featuring it 🙂
What about slatecss.com?