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.
DownloadResponsive.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.
DownloadResponsive Grid System
This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.
DownloadMueller 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.
DownloadGolden 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.
Download960 Grid System
One of the most popular grid systems available.
DownloadFlexible Grid System
A simple and light weight grid system.
DownloadCSS 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.
DownloadMetro 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.
DownloadKNACSS
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).
DownloadSkeleton
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,
DownloadLess Framework 4
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.
DownloadBlueprint
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.
DownloadUnsemantic CSS Framework
The Unsemantic CSS framework was created by Nathan Smith. He works as a Principal Front-End Architect at TandemSeven.
DownloadUI Kit
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
DownloadThao Framework
A sleek and minimal CSS framework for easier web development.
DownloadSemantic UI
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
DownloadSchema 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.
DownloadKule CSS Lazy
Kule is a CSS framework, working for reducing duplicate CSS design during development.The whole Library contain 8 CSS files.
DownloadInk
Create responsive web interfaces quick and efficiently.
DownloadEmastic 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.
DownloadMaxmert Kit
Maxmertkit is the most customizable and easiest for usage framework you’ve ever seen.
DownloadCascade Framework
Cascade Framework gives you a perfect balance between lots of features and a lightweigt footprint.
DownloadPure.css
A set of small, responsive CSS modules that you can use in every web project.
DownloadBootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
DownloadYAML CSS Framework
A modular CSS framework for truly flexible, accessible and responsive websites.
DownloadFoundation Framework
The most advanced responsive front-end framework in the world. Now at version 5.
DownloadConcise CSS Framework
Concise is built from the ground up for mobile devices. This means it will look great on all devices.
DownloadBase Framework
A super simple, responsive framework built for all devices big, small and in-between
DownloadIvory CSS Framework
A simple, powerful and flexible CSS framework for creating fast websites.
DownloadKube
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.
DownloadSpectre.css
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
