Design Freebies and Weekly Coolness
Freebies

30+ CSS Frameworks and Grid Systems

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.

Last updated October 5th, 2016

Grid Systems

Gridiculo.us

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.

Download 

Responsive.gs

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.

Download

Responsive Grid System

Responsive Grid System

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

Download

Mueller Grid System

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.

Download

Golden Grid System

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.

Download

960 Grid System

960 Grid System

One of the most popular grid systems available.

Download

Flexible Grid System

Flexible Grid System

A simple and light weight grid system.

Download

CSS Frameworks

Cardinal

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.

Download

Metro UI CSS

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.

Download

KNACSS

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).

Download

Skeleton

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,

Download

Less Framework 4

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.

Download

Blueprint

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.

Download

Unsemantic CSS Framework

Unsemantic CSS Framework

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

Download

UI Kit

UI Kit

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

Download

Thao Framework

Thao Framework

A sleek and minimal CSS framework for easier web development.

Download

Semantic UI

Semantic UI

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

Download

Schema Framework

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.

Download

Kule CSS Lazy

Kule CSS Lazy

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

Download

Ink

Ink Framework

Create responsive web interfaces quick and efficiently.

Download

Emastic CSS Framework

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.

Download

Maxmert Kit

Maxmert Kit

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

Download

Cascade Framework

Cascade Framework

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

Download

Pure.css

Pure.css

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

Download

Bootstrap

Bootstrap

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

Download

YAML CSS Framework

YAML CSS Framework

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

Download

Foundation Framework

Foundation Framework

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

Download

Concise CSS Framework

Concise CSS Framework

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

Download

Base Framework

Base Framework

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

Download

Ivory CSS Framework

Ivory CSS Framework

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

Download

Kube

Kube CSS 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.

Download

Spectre.css

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

 

 

Spectre CSS Framework

Download

Leave a Reply

Your email address will not be published. Required fields are marked *