30+ CSS Frameworks and Grid Systems

Creating beautiful websites has never been easier, and that is because of the apparence of CSS frameworks and grid systems, which are actually also frameworks.

These CSS frameworks help simplify the web designer’s job, by having pre-created blocks of code for frequently used HTML sections, like columns, buttons, menus, typography items, lists and such.

Starting from these blocks of code is a lot easier then writing from scratch, especially considering the fact that now there are a lot of screen sizes to consider, from mobile phones and tablets to laptops and desktop computers.

Below I compiled the most used CSS frameworks, so you can easily choose the right one for your project. The following list is always updated with new frameworks as they appear, so it will always be up-to-date.

Grid Systems

Gridiculo.us

Gridiculous is an HTML5 responsive grid boilerplate that can take your site from 1200px all the way down to 320px. Make you site look great on desktop browsers, tablets and handheld devices.

Responsive.gs

CSS grid system for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Responsive Grid System

This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.

Mueller Grid System

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

960 Grid System

One of the most popular grid systems available.

Flexible Grid System

A simple and light weight grid system.

CSS Frameworks

Cardinal

Cardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind.The purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications.

Metro UI CSS

Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons. Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.

KNACSS

KNACSS supports basic styles, but also typography, box models, elements of the alignments and positioning, layout grids, in the spirit of being adapted to all screen sizes ( responsive).

Skeleton

Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often more than enough to get started. In fact,

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

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.

Unsemantic CSS Framework

The Unsemantic CSS framework was created by Nathan Smith. He works as a Principal Front-End Architect at TandemSeven.

UI Kit

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

Thao Framework

A sleek and minimal CSS framework for easier web development.

Semantic UI

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Schema Framework

A modular, front end framework to easily and quickly help you jumpstart your process in building complex interfaces for the web right out the box.

Kule CSS Lazy

Kule is a CSS framework, working for reducing duplicate CSS design during development.The whole Library contain 8 CSS files.

Ink

Create responsive web interfaces quick and efficiently.

Emastic CSS Framework

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

Maxmert Kit

Maxmertkit is the most customizable and easiest for usage framework you’ve ever seen.

Cascade Framework

Cascade Framework gives you a perfect balance between lots of features and a lightweigt footprint.

Pure.css

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

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

YAML CSS Framework

A modular CSS framework for truly flexible, accessible and responsive websites.

Foundation Framework

The most advanced responsive front-end framework in the world. Now at version 5.

Concise CSS Framework

Concise is built from the ground up for mobile devices. This means it will look great on all devices.

Base Framework

A super simple, responsive framework built for all devices big, small and in-between

Ivory CSS Framework

A simple, powerful and flexible CSS framework for creating fast websites.

Kube

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.

Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.