Great CSS Frameworks

Here is a collection of great and light css framework that you can include in your daily coding to save time and money.

EZ-CSS

ezcss
It is light (1kb), flexible, browser-friendly and easy to use! EZ-CSS is a different kind of CSS framework. Authors are not bound to a “grid”. Plus, columns and gutters can be of any width. EZ-CSS works by forcing the final element in the HTML flow to become a block formatting context (we use “hasLayout” for Internet Explorer lt 8). If this makes no sense to you don’t worry, because using is an easy 4-step process.

Atatonic

Atatonic CSS Framework
The main goal of this project is to provide a solid base to start with every project. I do not want to bloat this framework with features. That is what you do in the project specific styles. The combined file is only 5kb. Deflate of gzip it and you are down to 3kb.

Baseline

baseline framework
Baseline is a framework built around the idea of a “real” baseline grid. Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

Elastic CSS 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

FEM CSS Framework

fem-css
FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts. It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes. Cross browser compatible. Tested in IE (6, 7, 8), Opera, Gecko (Firefox) and Webkit (Safari, Chrome) browsers.

520 GRID SYSTEM

520-grid
HTML/CSS Framework made for Facebook Page Developers and Narrow Website Templates Lovers. 520 Grid System is 520px wide including 16px left and right margin around container. It is based on 12 grids with 16px gutters with it; 12 is nice number that can be divided with 2, 3, 4 or 6 to get inline columns with equal width. Presently, 520 Grid System has not included styles for text, tables, forms,… but that’s in my todo list.

Tiny Fluid Grid

Tiny Fluid Grid
Inspired by 1kbgrid.com. Developed with love by Girlfriend’s overconfident and pretty good looking team of web developers. Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.

The 1KB CSS Grid

The 1KB CSS Grid
Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid. Though simple, The 1KB CSS Grid packs the punch of a heavyweight. Nested rows? Piece of cake! A fluid grid rather than a fixed one? No problem! Explores some of the finer details of implementing the grid.

SenCSs

sencss
For one, SenCSs isn’t a framework like other CSS frameworks. It doesn’t include a layout system littered with silly classes and pre-set grids, so what does SenCSs do for you? SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more. All the stuff that’s almost the same in every project, but that you keep writing again and again …and again. SenCSs handles that for you. And nothing more.

Carrer web log

Carrer web log
This is the challenge of writing entire CSS layout system with one line CSS class. I just wanted to prove how easy CSS can be, and with little imagination we can be build cool things. I started with the principle that every column can be divided by two, becoming half column or 50% column. So how can we build CSS Layout system with this principle? One column can become 2 (50%) column or 100% = 50% + 50%. So we can make 2,4,8,16, … layout system.

THE SQUARE GRID

THE  SQUARE  GRID
A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block.

SnippetSpace

SnippetSpace
SnippetSpace, home to iWebkit, the popular iPod and iPhone site and WebApp creator. discover our awesome lightweight and optimised tools and build your own mobile and desktop websites with ease.

INSTANT BLUEPRINT

INSTANT BLUEPRINT
The initial idea I had came from when I had a very basic computer and had limited space (20gb hard drive, yeah I know lol), like probably most of you I used to store basic template frameworks 1, 2 ,3 column etc etc but soon realised I was editing these alot to suite my needs aswell as visiting other sites to get other files needed and so wanted a way to some how get everything in one place when i needed them.

  • Mark

    Great collection, thanks!