29 Free CSS Frameworks and Tools for Web Developers

A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.
Some developers are tired of writing the same CSS code so thinking of this some CSS frameworks are written to get the job done in a short way.Well,some developers always prefer to write the codes as unique but the below CSS frameworks may help you.
Complete List of CSS Frameworks
———————————————————————————————————–
1.YAML Yet Another Multicolumn Layout

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.

• A flexible, accessible layout concept for designing column-based and grid-based CSS layouts,

• Extensive Cross-browser compatiblity (IE 5.0/Win+) for bullet-proof layout rendering in every situation,

• The fewest possible restrictions for the designer (fixed or flexible layouts, variable column widths, etc.),

• User-defined order of content columns in the source code (“any order columns”),

• Stylesheet templates ordered by function to work efficently,

• Column separators and backgrounds all generated without images and continuous down to the footer,

• Flexible grid-system via subtemplates for almost all purposes

2.YUI 2: Grids CSS

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.

3.960 Grid System

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 two variants: 12 and 16 columns, which can be used separately or in tandem
4.BlueTrip Css Framework

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

• 24-column grid

• Sensible typography styles

• Clean form styles

• A print stylesheet

• An empty starter stylesheet

• Sexy buttons

• Status message styles

Example Sites Using BlueTrip
Ankhou
Freelancetheworkspace
Wellspring.northbay
5.Emastic

Emastic is a CSS Framework with below features;

• 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

6.Elasticss

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 CSS Framework is a freestyle framework you can mix and nest any number of columns, you can even mix any number of columns, fixed-columns, and elastic-columns.
>Click To See Sites Using
7.Baseline CSS Framework

Baseline can be used in many different ways. Use the reset.css and base.css file as a starting point, include the type.css for typographic control or include all files to have a complete foundation to start your web project.Baseline can be used in many different ways. Use the reset.css and base.css file as a starting point, include the type.css for typographic control or include all files to have a complete foundation to start your web project.
8.The Fluid Grid System

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.
9.MarkerCSS

Code open source for web page layout,flexibly and quickly, based on standard CSS
10.The Golden Grid PSd Template Included

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites.There are two CSS systems called golden-base(golden.css) and golden-extend(reset.css, golden.css , typography.css)

• Golden Base = min css reset + grid system
• Golden Extend = complete css reset + grid system + typography

11.Object Oriented CSS-OOCSS

Nicole first presented Object Oriented CSS at Web Directions North in Denver. Since then, the response has been overwhelming. OOCSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
12.Lovely CSS

The Lovely CSS Framework is a simple and straight forward way to easily deploy an XHTML/CSS site.Based on a simple 960px wide grid system, featuring multiple column layouts, and various pluggable add-ons. Additionally, it contains the most common and useful js scripts along with other ready to use snippets (plug-ins) which make life easier.
13.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.
Features

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

Click To See Sites Using Blueprint
14.52 Framework

The 52framework was started by the enavu network as a way to expedite the process of the usage of the latest standards in web development, and the love of the number 52. The 52framework provides an easy way to get started using html5 and css3 while still supporting all modern browsers (including ie6).
What’s in 52 Framework Box
index.html – The the index file is the demo page
grid_demo.html – The grid_demo is a page filled with all the possibilities
html5.js – this javascript file is what allows us to use the HTML5 elements today
general.css – this file includes all the general styles
grid.css – the grid stylesheet contains your grid styling
reset.css – based on the Eric Meyers reset this reset stylesheet has been modified to include the HTML5 elements the framework uses
code.jpg, code.psd – the code image is used for the tag.
grid.jpg, grid.psd – the grid.jpg is being deprecated in the next version
15.Elements CSS Framework

Elements is a CSS Framework that was developed by Ben Henschel. It lets you write CSS easier, faster, more efficient, and allows you to organize all of your project files. There are many files and folders that make up Elements.From client files to design to code to getting out on the web, Elements is with you through out the entire process.
Features

• 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

16.Content With Style

Created by Mike Stenhouse.There are 5 main layouts.
17.Typogridphy

A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry(http://csswizardry.com/).Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.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.The source is fairly well documented, and a basic knowledge of CSS will be enough to see you on your way.
18.The 1Kb CSS Grid

Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight.Here is the demo screenshot.
19.Easy Framework

Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. 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. Framework includes all 3 layers of front-end: structural, presentational and interactive what makes it the true all-in-one solution for your next front-end project.
20.Compass

Compass is a CSS Meta-Framework that provides ports of the best of breed CSS frameworks to Sass(http://sass-lang.com/) and ready to use in your ruby-based web application or stand-alone via a simple command-line interface.
21.Floatz

Floatz is a flexible, powerful and easy to use CSS framework. It provides a rich set of reusable CSS classes and code snippets that help web designers and programmers to build state of the art, semantic thus more accessible web sites and applications, based on web standards, in less time.
22.SenCSs

SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.

Features
Sets a vertical rhythm for all elements (18px baseline)
Sets a common typographic standard across browsers
Has fonts specified for windows, mac and linux
Is optimised, meaning no “double resets”, to make the CSS as efficient as possible
23.FEM CSS Framework

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.
24.Primary CSS

Primary is a simple CSS Framework, designed for Developers and Designers in order to make using CSS as easy as possible.Primary is an experiment based on the concepts of legendary comic book artist Wally Wood’s “22 Panels That Always Work”.Primary is Open Source.
25.Formee

Formee works with the technique provided by Fluid 960 Grid System (created by Stephen Bau, based on the 960 Grid System by Nathan Smith) to compose the form’s layout, allowing total flexibility to put it in any website or web system.Reached over 6.500 downloads until now.
26.Instant Blueprint

Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster!
27.Less Framework

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

RMSforms” CSS Forms framework is a work in progress. The goal of this project is to make form styling as simple as possible.
29.xCSS

xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features.

CSS Pitfalls for Web Designers to Avoid

The stylistic language of CSS has been among us for many years, yet while it possesses the ability to engage and entrance our visitors with increasingly complex feats of layout and design engineering, poor decision making can affect the final outcome. While often due to a lack of awareness of the implications or from personal choice, a number of potentially problematic issues exist that can result from innocent decisions. This article aims to correct these common practices.

Proprietary Code Isn’t Demonic

The first pitfall that needs to be addressed is the common misconception regarding proprietary code such as webkit transitions and animations. One of the major reasons why vendor prefixed code is frowned upon by many in the industry is simply because it doesn’t validate. Because the code was not set or sanctioned by the W3C, those who rely on the validators see it as a mistake rather than a helpful feature which can boost a site’s beauty which is rather a shame when you think about it.
As designers, we regularly find ourselves trapped within code. With CSS having a specified limit on what properties are valid, custom properties are given an opportunity to push the boundaries, test new features like CSS3 before it goes final and not intrude on the general layout. Yes of course, if you make your code depend on them, it’s likely to break, but surely you make your CSS progressively enhance to such code and update your site anyway, so there’s not really anything to worry about! Using proprietary CSS isn’t a bad thing – it just requires an extra bit of attention and maintenance.

Ignoring Browsers or Mobile Devices

The next pitfall we can address is one which seems to be trickling into the mainstream, but not at a proportionate pace in relation to its visible growth. Like them or not, many cellphones and handheld devices now have Internet access, and not just that clunky WAP system which existed in the 90’s. Many smartphones and featurephones actually have a fully fledged browser within them. With this in mind, why do so many people still remain loyal to testing in desktop rendering engines?
People are using the web in all sorts of ways they didn’t in the past. Televisions are being enabled, phones are already enabled and there have even been refrigerators with Internet access in the past though it’s fair to say that it didn’t take off. Some people don’t test outside of the desktop because of perceived costs this is less of an issue with the range of good emulators. It’s also not fair to say that the usage numbers don’t justify the testing after all, usability should be paramount. If your site doesn’t already work on handheld devices, it’s now time to consider making the experience better.

Inline Style When External Will Do

Many standards advocates have been promoting the importance of separating structure, behaviour and style for the reasons of ease of maintainability and the advantages of caching, yet still to this day there are many individuals who make use of either the style attribute, style tags within the header or even resort to using deprecated stylistic elements within their code. While the more perceptive and up-to-date amongst you will already avoid this at all costs, the bad trend just seems to continue!
In this case the resolution of such problematic coding is education and while we all know that taking that CSS, stripping it from the page and breaking it into a separate file will give you the amazing and cool bandwidth savings that browser caching provides possibly more if you have GZIP enabled on the server, the necessity of many CMS products, prebuilt apps and WYSIWYG editors to continue applying style in such a manner requires immediate attention. There is rarely a case where internal style is of more use than external, and as such, learning to avoid repetitive coding is worth the effort.

Keep it Together (Less Files are Good)

Following on from the previous pitfall, something which plenty of active designers who code beyond the novice level will encounter is the separation of stylesheets into smaller files. While the breaking down of style into separate files may serve a purpose if you update your CSS files regularly and wish to maximize caching, the argument that separate files are easier to navigate seems to showcase the IDE or editor’s lack of code tracking methods than a real need to invoke added HTTP requests.

Putting it simply, editors like Notepad++ have the ability to cleverly collapse code, which removes any potential issue which may result from lengthy CSS files. If your current editor doesn’t have such a function, it may be worth changing to a tool that does as unless you update your CSS regularly, the extra HTTP requests to the server are waste produce. While this may seem rather picky, it’s easier from the browser to navigate “view source” in a single file, and as media selectors can target specific conditions like print styles or certain widths, you can still have the separation within a single file.

Typeface Dependence and Unit Values

Finally it’s worth mentioning the pitfalls of typeface and unit value dependence. Back when the web was young, the need for selecting relatively Websafe typefaces was critical, yet while the lures of @font-face may give another impression, this still hasn’t changed. So many sites assume that a font has been installed or font-face will be available that many simply ignore the traces of usable fallback mechanisms. In addition, tonnes of sites still use PX units on text which is crazy for IE users.

With Websafe fonts, it’s easy to say that there’s no such thing as most typefaces can be uninstalled along with font-face downloads disabled, and with CSS3 not being available everywhere, it’s still very important that we acknowledge those devices. When you make use of the font-family property in CSS, always ensure that you have a proper stack formed with fallback options, it’s that simple. As for measuring text unit’s in PX, while the Zoom function in every browser will handle the task of resizing it with ease, IE’s Text Size accessibility option (even in IE9) can’t resize PX measured text!

Think Before You Style

There are plenty of mistakes we can end up with while coding, from forgetting the hash character in color hex values to spelling the properties incorrectly or even forgetting about case sensitivity in CSS selector names. While the journey of getting to grips with CSS may be long and slightly daunting for the less experienced coder, the need to think about what you’re doing, exploring the risks of using both standardised and proprietary code in browsers and staying in control of your site is critical.
For the more advanced CSS developers out there, the terrors of hasLayout and the new frontiers of mobile design will remain heavily in our focus as will browser compatibility. For beginners, the way in which you build, structure, organise and maintain your code (and getting past those simple yet somewhat annoying validation issues) will be paramount. In either case, it’s acceptable that we will all suffer at the hands of our own mistakes (or those of browsers) in the future, so the best thing any of us can do is stay vigilant, read the specifications, keep learning and stay on top of what’s new!
Questions
Do you agree with my observations that vendor prefixed codes can be helpful? Are you a fan of font-face and non-Websafe typography? Do you test or build for mobile devices? Or are you the person who still uses inline styles or tonnes of separate CSS files? Let us know in the comments!