Best Web-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.

• Based on web standards
• Designed for accessibility
• Robust, flexible layout concept
• Modular construction, user-oriented functionality
• Complete multilingual documentation

Source: YAML

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.

Source: YUI

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.

GridEasy is a CSS framework that makes the effective creation of beautiful and standards compliant web pages much easier and faster.

Source: GridEasy

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.

Why should you use Malo?

• Ultra small (compressed is 0,25 kb or 8 lines of CSS!)
• Personalized width of the page in (%, px, em)
• Super flexible
• Easy to use

Source: Malo/Google Code

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.

Why should you use emastic?

• 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

Source: Emastic/Google Code

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.

Dimensions

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.

Purpose

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.

Source: 960.gs

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.

It's all about the process!

Elements is a collection of folders and files that help you work faster. It was made to fit into your exsisting workflow, or be its own workflow. From client files to design to code to getting out on the web, Elements is with you through out the entire process.

Some of the awesome features:

• 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

Source: Elements

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. The aim of this project is to provide a set of well-tested modular CSS files, that can be used for fast design of web sites.

WYMstyle favors:

• Speed of developement
• Easiness of maintenance
• Modularity
• Reuse of work across projects
• Centralisation of styles related to different projects
• Ease of understanding of the CSS code.

Source: WYMstyle Sourceforge.net

As one of the original authors of Blueprint CSS I've decided to re-factor my 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. You're the designer and your craft is important.

Source: Boilerplate/Google Code

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.

The ideas behind Tripoli

Ever since the first alpha release, Tripoli is all about:

• Forming a generic standard for rendering HTML 4 tags
• Resetting and rebuilding all browser defaults for maximum compability
• Addressing deprecated tags in HTML 4 and disable them through CSS
• Separating content typography from layout measurements, allowing simple implementation in dynamic design environments
• Increasing readability and web typography
• Assisting clients who have little knowledge about CSS to write HTML that actually looks great
• Increasing form useability and visual appearance of form controls
• Embracing W3C's guidelines and well know typographic rules
• Allowing external plugs that can extend generic defaults into more advanced themes

Why use it?

• Separate content from layout by putting typographic measurements into a class
• Enjoy a bullet-proof default rendering engine that's been carefully tested down to Internet Explorer 5
• Have full control over all CSS rules without disturbing browser defaults
• Improve readability and useability of your HTML content

Source: Tripoli

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.

Flexible Layouts - no problem!

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. Sparkl allows you to create 1, 2 or 3 column layouts with the content in any order. Grid layouts are made simple.

Source: Sparkl/Google Code

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. I have created Typogridphy using ems, meaning the layout is zoomable — try holding your Ctrl key and scrolling your mouse wheel.

Open Source

Typogridphy has been released by CSS Wizardry’s Harry Roberts Free Of Charge — it is available for commercial and personal use.

Typogridphy has been made free for a number of reasons. I made the CSS originally for myself, so it has served its purpose to me — however I was extremely pleased with the results so I thought I’d adapt and then share it. Also, I taught myself a lot during its production, and they do say the best way to learn is to teach. I have gleaned untold knowledge of typography for the web, as well as good techniques for proper use of the CSS cascade.

Source: Typogridphy

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.

Simple is beautiful

Main features:

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

Source: Golden Grid/Google Code

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.

Using the Grid for Templating?

When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. The 1KB CSS Grid's convenient row and column syntax provide all the necessary scaffolding.

The Details

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.

Source: The 1KB CSS Grid

SenCSs stands for Sensible Standards CSS Framework, (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.

What SenCSs is and is not

For one, SenCSs isn’t a framework like other CSS frameworks. It doesn't include a layout system, and I'm actually not sure it should be called a "framework" — But I'll go with it until I find a better term.

Now, if not a layout system littered with silly classes and pre-set grids, 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.

What does SenCSs do for you?

• Stays close to the browsers base styling, but adding some sense to it
• 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

What does SenCSs not do?

• Force a lay-out system on you
• Sneak in unsemantic classes

Source: SenCSs

Taffy saves you time. As a CSS Developer, there are a few things you probably do a lot: override default browser styles, give your type a readable measure, re-work typography, etc. Taffy takes care of these tasks that you've been doing over and over for every project, leaving you to do what you do best: craft semantic, beautiful CSS.

Taffy lends you a hand with...

• 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
• Making you a cup of tea (well, maybe in future).

Source: Taffy/Google Code

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.

Main features

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

Source: Logic CSS/Google Code

Recently I had a client who wanted to improve the printing layout for his web site. I made mini case analysing various web printing techniques and how different web sites site manage "printer friendly" pages.

The Study and analysis of different CSS methods for web printing brought me to a discovery that many important web sites are not optimized for printing, even the kind that can be done with little effort.

To solve this problem I decided to make universal Cascading Style Sheets for web printing by uniting all best CSS printing practises into one.

Source: Hartija/Google Code

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.

What can BlueTrip do for you?

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.

Source: BlueTrip

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!

Source: Compass

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.

The benefits of CSS Frameworks

All frameworks are the consequence of repeated patterns, they help developers get faster, repeatable and predictable results. CSS frameworks are no different. By using them you can predict the results you will obtain, and you don’t have to write over and over the same classes or CSS rules to accomplish certain results.

The people against CSS frameworks argument that because they can accomplish the same results by themselves, frameworks have no benefit. But Modularity is the first benefit, going with the DRY principle of programming.

So do you need a CSS Framework? We would say you do. The problem here is to decide if currently available frameworks provide the features you need. Or going and develop a framework yourself...

Why Elastic?

• 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.
• Make two, three, four, or auto-columns.
• Let Elastic get the width of fixed width columns.
• Call for same-height or full-height.

Source: Elastic

Winston is a user interface library consisting of common elements in websites and web applications. These elements work together in an ecosystem of conventions, guidelines and best practices. The goal of this library is to provide designers and developers with a solid base to build user interfaces. Think of it as Rails for designers.

Source: Winston

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.

Source: Baseline