The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

24 High Quality Free CSS Frameworks

CSS Frameworks allow web designer to develop web pages more quickly. We can not always choose a single framework and use it in all our projects. Each project has different characteristics, so we must choose the right tool for each of it. In this post you can find an huge collection of CSS Frameworks for every kind of web site. Some of these framework are very famous (960gs, Blueprint, YUI, etc.) but there are many less known but at the same time very powerful that you have to try.

We have also included a comparison table with the main features of each framework. Read on to choose your next CSS framework.

Comparison Table

Framework Size Grids Reset Text Forms Fixed Fluid
960gs 23kb Yes Yes Yes No Yes No
Blueprint 15kb Yes Yes Yes Yes Yes No
YUI 2: Grids CSS 25kb Yes Yes Yes No Yes No
BlueTrip 18kb Yes Yes Yes Yes Yes No
Easy 9kb Yes Yes Yes No Yes No
Elastic CSS 7kb Yes Yes Yes Yes Yes Yes
Tripoli 22kb Yes Yes Yes No No Yes
EZ-CSS 2kb Yes No No No Yes No
CleverCSS
LogicCSS 7kb Yes Yes Yes No Yes Yes
SenCSs 5kb No Yes Yes No No No
Emastic 4kb Yes Yes Yes No Yes Yes
Typogridphy 10kb Yes Yes Yes No Yes No
Less Framework 3kb Yes Yes Yes No Yes No
Boilerplate 6kb No Yes Yes Yes No No
Elements 8kb No Yes No No Yes No
Malo 1kb Yes Yes No No No Yes
The 1kb CSS Grid 1kb Yes Yes Yes No Yes No
Content with Style 38kb No Yes Yes Yes Yes No
Fluid Grid System 4kb Yes Yes No No No Yes
WYMstyle 25kb No Yes Yes Yes Yes No
YAML 22kb Yes Yes Yes Yes No Yes
The Golden Grid 2kb Yes Yes No No Yes No
Compass

960gs

h1 24 High Quality Free CSS Frameworks

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 three variants: 12, 16 and 24 columns, which can be used separately or simultaneously.

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

960 Grid System — Demo 1290962984726 600x294 24 High Quality Free CSS Frameworks

Link: http://960.gs/

Blueprint

blueprint header clean 24 High Quality Free CSS Frameworks

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.
Some of its features are:

  • A CSS reset that eliminates the discrepancies across browsers.
  • A solid grid that can support the most complex of layouts.
  • Typography based on expert principles that predate the web.
  • Form styles for great looking user interfaces.
  • Print styles for making any webpage ready for paper.
  • Plugins for buttons, tabs and sprites.
  • Tools, editors, and templates for every step in your workflow.

Blueprint Sample Page 1290963075108 600x343 24 High Quality Free CSS Frameworks

Link: http://www.blueprintcss.org/

YUI 2: Grids CSS

YUI 2 Grids CSS 1290963209460 24 High Quality Free CSS Frameworks

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Other features include:

  • Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
  • Supports easy customization of the width for fixed-width layouts.
  • Flexible in response to user initiated font-size adjustments.
  • Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
  • Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
  • Layouts less than 100% are automatically centered.
  • Accommodates IAB’s Ad Unit Guidelines for common ad dimensions.
  • Offers full A-grade browser support.

Grids CSS Example YUI Grids Special Nesting Grid E 3 4 1 4 12909632764481 600x362 24 High Quality Free CSS Frameworks

Link: http://developer.yahoo.com/yui/grids/

BlueTrip

BlueTrip CSS Framework A beautiful and full featured CSS framework 1290963388337 24 High Quality Free CSS Frameworks

A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.

BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing.

BlueTrip CSS Typography A Fusion of Blueprint and Tripoli 1290963491128 600x335 24 High Quality Free CSS Frameworks

Link: http://bluetrip.org/

Easy

Easy front end framework 1290963572619 24 High Quality Free CSS Frameworks

Easy is more than a CSS framework designed for building layouts. It includes built-in (jQuery powered) interactive functions that are so easy to use that you really don’t have to know first thing about JavaScript. It also includes a library of preformatted and precoded CSS/HTML content blocks that you can simply paste into your master template. With a way of file organization it allow you to easily create your own content blocks. To sum it up Easy includes:

  • Solid CSS base in terms of HTML element styles and layout construction
  • Built-in interactive functions, extremely easy to use
  • Upgradeable HTML content blocks library

Easy is rock-solid, true all-in-one front-end solution that you can easily use as it is or customize to fit your own needs.

Easy front end framework 1290963597136 600x520 24 High Quality Free CSS Frameworks

Link: http://easyframework.com/

Elastic CSS

header elastic css logo 24 High Quality Free CSS Frameworks

Elastic is 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.

Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code. This way you don’t have to remember cryptic class names, just express what you want.

Examples of Layouts For more info visit www.elasticss.com 1290963846024 600x243 24 High Quality Free CSS Frameworks

Link: http://elasticss.com/

Tripoli

Tripoli a CSS standard for HTML rendering DevKick Lab 1290963968078 24 High Quality Free CSS Frameworks

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

Sample HTML 1290964008574 24 High Quality Free CSS Frameworks

Link: http://devkick.com/lab/tripoli/

EZ-CSS

EZ CSS An easy to use lightweight CSS framework. 1290964530996 24 High Quality Free CSS Frameworks

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. It works by forcing the final element in the HTML flow to become a block formatting context (It uses “hasLayout” for Internet Explorer lt 8). If this makes no sense to you don’t worry, because using  is an easy 4-step process:

EZ CSS An easy to use lightweight CSS framework. 1290964672204 24 High Quality Free CSS Frameworks

Link: http://www.ez-css.org/

CleverCSS

CleverCSS 1290964807403 600x94 24 High Quality Free CSS Frameworks

CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is.

The most obvious difference to CSS is the syntax: it is indentation based and not flat. While this is obviously against the Python Zen, it’s nonetheless a good idea for structural styles.

CleverCSS 1290964884089 24 High Quality Free CSS Frameworks

Link: http://sandbox.pocoo.org/clevercss/

LogicCSS

logo light trans 24 High Quality Free CSS Frameworks

The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates. Some features are:

  • Common cross-browser rendering behavior approach (not a reset).
  • Beautiful font stacks.
  • Typography with text resizing capabilities and vertical baseline/rhythm.
  • Three totally flexible layout grid templates, customizable with the toolset.
    • Elastic layout using EMs.
    • Liquid layout with percentages.
    • Fixed layout using pixel dimensions.

Link: http://code.google.com/p/logicss/

SenCSs

sencss 24 High Quality Free CSS Frameworks

SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense“). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style.

SenCSs documentation 1290965215743 600x364 24 High Quality Free CSS Frameworks

Link: http://sencss.kilianvalkhof.com/

Emastic

emastic 24 High Quality Free CSS Frameworks

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. Some of its features are:

  • Lightweight (compressed weight less then 4kb)
  • Personalized width of the page in (em,px,%)
  • Use of fixed and fluid columns in the grid.
  • Elastic Layout with “em”s
  • Baseline Grid Typography

Fluid Grid border 1290965361303 600x221 24 High Quality Free CSS Frameworks

Link: http://code.google.com/p/emastic/

Typogridphy

Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry 1290965495065 24 High Quality Free CSS Frameworks

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS. It also uses a typographical method know as ‘creating vertical rhythm’, whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs. This method in itself isn’t that difficult to accomplish — using pixels.

Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry 1290965542330 600x224 24 High Quality Free CSS Frameworks

Link: http://csswizardry.com/typogridphy/

Less Framework 3

Less Framework 3 1290965662955 600x81 24 High Quality Free CSS Frameworks

Less Framework is a cross-device CSS grid system based on using inline media queries.

The idea is to first create a default layout normally, and then additional layouts using inline media queries. Any browsers incompatible with media queries will simply ignore all the additional layouts, and will only use the default one. The additional layouts will inherit any styles given to the default layout, so coding them is a breeze.

ll four of the layouts included in Less Framework share a common column-width and gutter-width, which makes it easy to design them consistently. Also included are two sets of typography presets, composed around a baseline grid of 24 px.

Less Framework 3 1290965677580 24 High Quality Free CSS Frameworks

Link: http://lessframework.com/

Boilerplate

css boilerplate Project Hosting on Google Code 1290976612300 24 High Quality Free CSS Frameworks

Boilerplate: noun standardized pieces of text for use as clauses in contracts or as part of a computer program.

Boilerplate is written by one of the original authors of Blueprint CSS. He has decided to re-factor his ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions.

Link: http://code.google.com/p/css-boilerplate/

Elements

Elements A Down to Earth CSS Framework 1290976917998 24 High Quality Free CSS Frameworks

Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow. It has everything you need to complete your project, which makes you and your clients happy. Some features are:

  • Easy to use
  • Lightweight
  • Collection of preset classes
  • Lightbox included
  • An awesome mass reset
  • Adds style and usablity to external links with icons
  • Can be easily uploaded to your website hosting server
  • Free of course

Elements Overview 1290977092654 600x344 24 High Quality Free CSS Frameworks

Link: http://elements.projectdesigns.org/

Malo

malo 24 High Quality Free CSS Frameworks

Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites. Malo derives from it’s bigger brother Emastic CSS Framework.

Malo is based on the principle that every column can be divided into two, three, four and five parts.

  • 100% = 50% + 50%
  • 100% =~ 33,33% + 33,33% + 33,33%
  • 100% = 25% + 25% + 25% + 25%
  • 100% = 20% + 20% + 20% + 20% + 20%

Also you can use nested columns

100% = 50% + 50% ( and inside 25% + 25% + 25% + 25%)

Malo Tutorial 1290977292174 600x386 24 High Quality Free CSS Frameworks

Link: http://code.google.com/p/malo/

The 1kb CSS Grid

The 1KB CSS Grid by Tyler Tate A simple lightweight approach 1290977367868 24 High Quality Free CSS Frameworks

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.

The 1KB CSS Grid by Tyler Tate A simple lightweight approach 1290977535968 600x114 24 High Quality Free CSS Frameworks

Link: http://www.1kbgrid.com/

Content with Style

Content with Style A CSS Framework 1290977795669 24 High Quality Free CSS Frameworks

Content with Style is a quick-start framework with the possibility of breaking down stylesheets into components that could be reused across projects. It provides common names for div elements:

  • Header
  • Footer
  • Main content
  • Sub content
  • Main nav
  • Local nav

and provides 6 different layouts:

  • Vertical navigation with one content column
  • Vertical navigation with two columns of content
  • Horizontal navigation with one content column
  • Horizontal navigation with 2 columns of content
  • Horizontal navigation with local navigation and one column of content
  • Horizontal navigation with local navigation and 2 columns of content

Content with Style A CSS Framework 1290978174017 24 High Quality Free CSS Frameworks

Link: http://www.contentwithstyle.co.uk/content/a-css-framework

Fluid Grid System

Fluid Grid System 1290978514843 24 High Quality Free CSS Frameworks

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework. The Fluid Grid System is great for rapid prototyping as well as final production layouts because designers can quickly design layouts and make changes to complex pages which have the ability to maintain well-planned horizontal and vertical rhythm.

Fluid Grid System 1290978581345 24 High Quality Free CSS Frameworks

Link: http://fluid.newgoldleaf.com/

WYMstyle

WYMstyle CSS framework Download WYMstyle CSS framework software for free at SourceForge.net 1290978846104 24 High Quality Free CSS Frameworks

WYMstyle is a CSS (Cascading Style Sheet) framework for web designers. It allows to design web sites faster, using robust CSS modules, which are already tested in a large array of web browsers.

Link: http://sourceforge.net/projects/wymstyle/

Yet Another Multicolumn Layout (YAML)

Home Yet Another Multicolumn Layout An XHTML CSS Framework 1290978959058 24 High Quality Free CSS Frameworks

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

  • Focussed on web standards and accessibility
  • Slim framework core with numerous extensions
  • Robust, flexible layout concept (columns & grids)
  • Design patterns for typography, forms, mircoformats, rtl support ect.
  • Complete multilingual documentation

Table Of Contents YAML Examples 1290978986285 24 High Quality Free CSS Frameworks

Link: http://www.yaml.de/en/

The Golden Grid

the golden grid Project Hosting on Google Code 1290979120772 24 High Quality Free CSS Frameworks

The Golden Grid is the third framework written by Vladimir Carrer. He created first Emastic, then Malo and finally The Golden Grid. He was searching for the prefect web grid, playing with golden proportions, rule of thirds, symmetry, asymmetry, usability, monitor proportions, typography and the result came spontaneous – The Golden Grid. Some features are:

  • 970px main width
  • 6/12 grid system
  • Super lightweight((compressed weight less then 1kb)
  • Easy to learn.

Golden Grid 1290979150891 600x302 24 High Quality Free CSS Frameworks

Link: http://code.google.com/p/the-golden-grid/

Compass

Compass 1290979451185 24 High Quality Free CSS Frameworks

Compass is a stylesheet authoring tool that uses the Sass stylesheet language to make your stylesheets smaller and your web site easier to maintain. Compass provides ports of the best of breed css frameworks that you can use without forcing you to use their presentational class names. It’s a new way of thinking about stylesheets that must be seen in action!

Compass 1290979592222 24 High Quality Free CSS Frameworks

Link: http://compass-style.org

Comparison Table

comparison table

    Manage WordPress Blogs

    Comments: