Libraries and Components for Software Developers @ LibHound - » The longest list of CSS frameworks you probably ever seen.

The longest list of CSS frameworks you probably ever seen.

Jul 8, 2009 User Interfaces  38 Comments

If you tired of writing the same CSS-code over and over again with each next project then it is time to start collecting a set of nice CSS classes and ID’s for your own. Or wait! It is already collected in numerous CSS frameworks. Using them, you can get a perfect default stylesheet, save your time and ensure the quality of your code. Meet them now and choose a right one for yourself.

BluePrint CSS Framework (www.blueprintcss.org)

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.

Key features of BluePrint CSS Framework:
• 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.

960 Grid System CSS Framework (www.960.gs)

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. The 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. 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. for easy start 960 Grid System CSS Framework offers to download design templates for Fireworks, InDesign, Inkscape, Illustrator, OmniGraffle, Photoshop and Visio.

Yahoo! UI Library: Grids CSS Framework (developer.yahoo.com/yui/grids/)

The foundational YUI Grids CSS Framework offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns, totally 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.

Elements CSS Frameworks (elements.projectdesigns.org)

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. There are many files and folders that make up Elements, each with own purpose and a aim to simplify development sycle.

WYMstyle: a CSS framework (sourceforge.net/projects/wymstyle/)

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. With very outdated release and homepage website not working the framework looks no longer supported or reached the perfection.

YAML CSS Framework (www.yaml.de/en/)

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

Key features:
• Based on web standards
• Designed for accessibility
• Robust, flexible layout concept
• Modular construction, user-oriented functionality
• Complete multilingual documentation
• Offers YAML Builder – online tool to generate YAML CSS for own website layout

Boilerplate CSS Framework (code.google.com/p/css-boilerplate/)

One of the authors of Blueprint CSS introduces a stripped down framework which provides the bare essentials to begin any project. Boilerplate CSS Framework aimed to be lite and strive and not to suggest un-semantic naming conventions so popular in most of CSS frameworks.

CleverCSS (sandbox.pocoo.org/clevercss/)

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 CSS is. The most obvious difference to CSS is the Python syntax: it is indentation based and not flat. From many points it looks odd to to a markup this way, but it brings some advantages like use of constants or algorithmic expressions. Needless to say that these advantages may be achieved in many different ways even without CleverCSS.

Tripoli Beta CSS Framework (devkick.com/lab/tripoli/)

Tripoli completely resets all default browser element definitions and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t provide any instructions how to code a web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

CwS (Content with Style) CSS Framework (contentwithstyle.co.uk…)

CwS Framework is a set of CSS component block that can be reused in different projects. These blocks designed for use in most popular web page layouts as:

• 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

1 line CSS Grid Framework (vcarrer.com…)

Not actual a framework but a demo of creative thinking, however can be helpful in many projects. This framework is just a single line of css that allows creating 1,2,4,8,16 top level columns system plus some combinations like (50% + 25% +25%) with nested divs.

Sparkl (code.google.com/p/sparkl/)

Sparkl combines POSH markup, Bulletproof CSS and Unobtrusive JavaScript into one easy to use web development framework that makes it simple to create bulletproof websites that conform to web standards. It uses a modular framework, allowing you to use what you need and leave out what you don’t. Sparkl makes it very easy to produce a flexible layout – - make the browser window smaller and the text bigger; the site will flex to fit in all but the most extreme cases. Have a look at the example page to see this in action. Sparkl allows you to create 1, 2 or 3 column layouts with the content in any order.

Typogridphy (csswizardry.com/typogridphy/)

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.

Malo (code.google.com/p/malo/)

Another ultra small CSS framework is Malo. 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, and of course you can use nested columns to split it more.

The Golden Grid (code.google.com/p/the-golden-grid/)

A solution from creator of Emastic and Malo CSS Frameworks. 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.

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

The 1KB CSS Grid (www.1kbgrid.com)

Various CSS frameworks try to do everything – implement grid system, style reset, define basic typography and form styles but if you looking for a simple, lightweight framework then look into The 1KB CSS Grid. Despite its size, framework supports both fluid and fixed-width grids and nested. The website of the 1KB CSS Grid framework provides a generator to customize the grid and download the CSS.

Taffy CSS framework (code.google.com/p/taffy-css-framework/)

Taffy framework is a typical resetting solution, it just make all things behaving properly everywhere.

This is what it can do:
• Resetting ugly default browser styles for cross-browser consistency and future-proofness.
• Giving type a consistent typographical measure.
• Readable, accessible em-based text.
• Typographical proportions based on the traditional scale 24, 18, 14, etc
• Giving older, senile browsers a pretty, usable basic stylesheet

Logic CSS framework (code.google.com/p/logicss/)

The Logic CSS framework is a toolset designed to cut development times to produce standards compliant web layouts and templates.

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

Simpl.css – the simple css framework (simpl.romack.net)

Simpl.css Is a flexible modular CSS framework that is somewhat different than others out there.

• It is simple to use and learn via self documenting CSS code.
• It is width stretchable so you can adjust your page size on the fly if need be.
• Is infinitely nest-able but does not REQUIRE nesting for more than 2 columns.

SenCSs – Sensible Standards CSS Framework (sencss.kilianvalkhof.com)

Sensible Standards CSS Framework supplies sensible styling for all repetitive parts of CSS and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style. SenCSs does everything but layout system: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more. All the stuff that’s almost the same in every project.

Emastic CSS Framework (code.google.com/p/emastic/)

Emastic is a very complete CSS Framework integrating various CSS construction techniques like floats, absolute positioning, complete freedom of your default width, extra usability with em based grid system plus possibility of fluid columns and extra % based grid system and many more features.

Emastic is:
• 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

Hartija – Css Print Framework (code.google.com/p/hartija/)

Hartija is universal Cascading Style Sheets for printing web pages that unites all best CSS printing practises into a single one.

BlueTripCSS Framework (www.bluetrip.org)

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

Features list:
• 24-column grid
• Sensible typography styles
• Clean form styles
• A print stylesheet
• An empty starter stylesheet
• Sexy buttons
• Status message styles

Compass CSS Framework (wiki.github.com/chriseppstein/compass)

Compass is a stylesheet authoring tool that uses a 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. Compass is not a simple set of css files, it does require deeper technical background to start with it. At least you should be familiar with Sass and Unix command line. Good if you heart a word Ruby as it must be installed to make Compass working. For those who missed what is Sass, Sass is a stylesheet language, more advanced and functional then standard CSS, but it is also a bit more complex, especially for newbies. More info about Sass can be found here.

Elastic CSS Framework (www.elasticss.com)

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. Unlike many other frameworks Elastic provides a declarative syntax language to define the layout structure and behavior. Elastic CSS Framework is not a grid system either, it 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. Additionally, Elastic CSS Framework provides a set of helper classes, integrated clearfix, automatically identified end-blocks (you don’t have a write class=”last” anymore!); handles liquid, fixed, and elastic layouts, and even mix of them.