[CSS]CSS Frameworks for Designers

有一些 CSS Framework 还是值得试一下的，除了提高工作效率，也可以学习一些优秀的Framework思想.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

General CSS Frameworks

The CSS frameworks here offer designers a structure going into their projects, so they aren’t starting entirely from scratch. Some offer layout guidance, mostly through the use of grids, while others only focus on things like typography, leaving the layout entirely up to you.

1KB CSS Grid
The 1KB CSS Grid is an adaptable grid that can be configured in a number of ways before downloading. You choose the number of columns, the column width, and the gutter width before downloading the files. It’s an incredibly easy to understand grid, even for those not familiar with CSS frameworks. It’s also a very bare-bones framework, with only the CSS necessary to build the layouts (no extra formatting is included).

YAML
YAML (”Yet Another Multicolumn Layout”) is a CSS framework for creating flexible, floated layouts. It includes design patterns for typography, microformats, forms, and more, as well as full accessibility and web standards compliance. It’s also a very stable framework, with most browser bugs patched by YAML. There’s also the YAML Builder, which lets you create YAML-based layouts visually.

One of the sample YAML layouts with basic styling options.

Simpl
Simpl is a modular, flexible CSS framework that aims to fill in the gaps of some other CSS frameworks. It’s fluid (with the option of static side columns), simple to learn and use, and is nestable (but doesn’t require nesting). It includes styles for forms, tables, and other common elements.

The Golden Grid
The Golden Grid is a CSS framework built on the principle of the golden ration or the divine proportion. It’s 970px wide, uses a 6/12 grid system, and when compressed is less than 1kb. There are a bunch of great demos, both of the grid and of sample pages built on the grid. There’s also a mini tutorial available to help you get started.

An example of a layout created with The Golden Grid.

SenCSs
SenCSs is a framework that offers sensible styling for all the repetitive parts of your CSS files. It doesn’t include any kind of layout system, unlike many CSS frameworks, which makes it more versatile for non-standard website designs. It includes styles for a lot of other things though: baseline, fonts, margins, blockquotes, padding, and more.

Elements
Elements includes a variety of folders and files that help speed up your web design process. It’s a lightweight framework that’s easy to use, includes a number of preset classes, a mass reset, and adds icons to external links (which improves both style and usability).

Blueprint CSS
Blueprint is a free CSS framework that includes a CSS reset, a grid that supports complex layouts, styled typography and forms, and plugins for buttons, tabs and sprites. There’s also plenty of documentation to get you started, as well as a discussion group and mailing list.

Tripoli
Tripoli is a generic CSS framework that resets all default browser settings. It’s made to work with HTML 4 and separates typography from layout styles. It also aims to increase the readability of your websites through better typography. It also works with a number of plugins to extend the generic defaults of the framework.

Content with Style CSS Framework
The Content With Style CSS framework offers half a dozen layouts, including vertical navigation with one content column, horizontal navigation with one content column, vertical navigation with two columns of content, and horizontal navigation with local navigation and one column of content. It orders the source code logically, with the main content coming immediately after the header within the code, regardless of the visual layout of the page.

960 Grid System
The 960 Grid System is probably the most famous CSS framework that’s come out in recent years, and has been the inspiration for a number of other frameworks. There are two grids available: a 12-column grid with columns that are 60 pixels wide and a 16-column grid with 40-pixel-wide columns. One big advantage is that these basic grid configurations can be used separately or in tandem. 960 pays focuses on site layout and pays little attention to things like typography (though there are basic provisions in place for them).

Typogridphy
Typogridphy is a CSS framework that focuses heavily on typography within the layout. It’s based on the 960 Grid System and has standards-compliant, semantic code. The typography is based on the principle of vertical rhythm, but uses ems rather than pixels.

Emastic
Emastic is a lightweight CSS framework that lets you customize the width of the page using ems, pixels, or percentages. It works in either a fixed or fluid layout, and includes baseline grid typography styles. There’s a tutorial available that will teach you how to create layouts with Emastic, too.

Malo
The Malo CSS framework consists of only 8 lines of CSS code. It’s flexible and easy to use, with a customizable page width. Malo lets you create layouts made up of two, three, four, or five parts. Nested columns are also allowed.

BlueTrip
BlueTrip is a CSS framework based on a 24-column grid. It includes typography styles, an empty starter stylesheet, a print stylesheet, form styles, and more. There’s extensive documentation available, as well as a showcase of sites built on BlueTrip.

1 Line CSS Grid Framework
This is a bit of a different CSS framework, in that it only uses a single line of CSS. Using this single line of CSS, which works on the principles of dividing columns in half, you can create grids with 2, 4, 8, or 16 columns. It’s cross-browser compatible, even as far back as IE5.5.

原文地址：http://www.webdesignerdepot.com/2010/07/30-useful-frameworks-for-designers/