精選15個國外CSS框架

框架就是一個你可以用於你的網站項目的基本的概念上的結構體。 css框架通常只是一些css文件的集合，這些文件包括基本佈局、表單樣式、網格或簡單結構、以及樣式重置。比如：
: {: {+ T) ~3 w9 U1 ^2 ]+ E6 _
8 O- u1 N/ L) h& \) stypography.css 基本排版規則
grid.css 基於網格的佈局
layout.css 通常的佈局
form.css for 表單樣式
% q% U" G' C% ^3 Z2 A& U3 sgeneral.css 更多通用規則
" x! V9 D7 x3 `) K& d您還可以參考以下前端開發/CSS相關資源:
8 `3 R$ A9 p* W- O& L$ |: p
《推薦12款可用於前端開發的免費文本編輯器》
《Web前端開發必備手冊下載》
《推薦20個讓你學習並精通CSS的網站》
《300+Jquery, CSS, MooTools 和 JS的導航菜單資源》
下面一起來瞭解一下各種不同的CSS框架吧:
1.960 Grid System

& ]% \" @# t8 B8 z5 v960網格系統是一個通過提供通常使用的尺寸簡化網站開發流程的努力的結果，基於960像素的頁面寬度。它有兩種類型，12和16列，他們可以獨立使用或是協同使用。

' s+ r/ ~" c% L" w7 F- J2.WYMstyle CSS Framework

這個項目的目的是提供一組經過良好測試的模塊化的CSS文件，能夠用於網站的快速設計。WYMstyle是一組CSS文件，你可以很容易的組合這些文件來快速的創建你的網站的佈局。通過提供可靠的、經過良好測試的CSS模塊，WYMstyle 力求讓每個網站防止枯燥的跨瀏覽器兼容性測試。
) k% ^2 H. j) q& @  J3.YAML CSS Framework

Dirk Jesse的強大的(X)HTML/CSS框架為許多的簡單或更複雜的網站項目提供完整的默認模板包。YAML基於網頁標準並支持所有現代瀏覽器。所有的 Internet Explorer的主要渲染漏洞都被解決。YAML 完全支持從5.x到7.0的所有的IE版本。
+ L9 o' l+ [! ], f# `8 I4.YUI Grids CSS

基本的YUI網格CSS提供4種預設的頁寬、6種預設模板和再分為2、3、4卷的區塊的功能。 這個4KB的文件可提供超過1000中頁面佈局組合。
2 Q. v0 d% J% s# o
有國外作者曾指出YUI Grids CSS中最值得學習的網格佈局CSS寫法:
6 \4 }) a' l$ A+ J負Margin技術
使用度量單位em
清除佈局的浮動
  s" [& ~$ y- d9 N+ F5.Logicss Framework
& e8 R1 A! y8 d# ~3 I; k
$ D0 E$ y& m" T' Z/ pLogic CSS 框架是用來減少開發符合web標準的xHTML佈局的時間的一個由CSS文件和PHP程序組成的集合。通常跨瀏覽器表現行為(不是Meyer的reset文件或是用「*」)，排版支持文本字體大小調整(使用EMs) 和垂直居中，符合可定義的靈活的佈局網格利用css代碼生成玩具。

3 Z. R# l$ W  h1 l6.CleverCSS

CleverCSS是一個用於css的受Python啟發的小型的標記語言，它可用於以整潔的和結構化的方式創建一個樣式表。在很多方面它都比CSS2整潔和強大。與CSS最明顯的區別是句法：它基於縮進而且不單調。雖然這顯然違反了Python的規則，它依然是組織樣式的很好的主意。
9 _, s$ N( x( r
, r2 T" Y& T* i9 G" {7.Elements CSS Frameworks
* U$ y9 P& W# s& c
Elements 是一個實用的CSS框架。它是為了幫助設計師更快更高效的來寫CSS而建立。Elements 已經超越了僅僅作為一個框架，它有自己的項目工作流。它擁有你完成項目所需的所有東西，這也讓你和你的瀏覽者感到愉悅
' e; T; k2 Y' N  S) ~8.Blueprint CSS

Blueprint 是一個 CSS 框架，它的目的是減少你的css開發時間。它提供一個可靠的css基礎去創建你的項目，BP由一個易用的網格、合理的佈局和一個打印樣式。

6 h4 n0 n% }  b8 e9.Schema Web Design Framework

Schema 是一個為了提供在重複的設計任務中必須的CSS和HTML標籤而設計的表現層的網頁框架設計。 與為每一個新的網站項目從零開始創建HTMl/CSS不同，Schema提供必要的基礎來開始並立馬讓你的設計跑起來。
$ u! \1 ^" Z+ ]3 r
10.Emastic CSS Framework
/ s( X1 ]- `+ V7 G/ H( u1 b' M
Emastic 是一個CSS框架，它有連續的任務：探索陌生的新世界，尋找新生活和新的網站空間，大膽的去CSS框架尚未到達的領域。它是輕量的、在頁面寬度上比較人性化，在網格中使用固定和不固定的列寬。 Elastic 用「em」佈局。

5 V0 x/ g* a5 a$ u# H11.That Standards Guy CSS Framework

* 只能調用單個樣式文件
% z9 U9 e7 j) R* A7 r" b8 D* 主樣式需要取得CSS認證(WCAG 1.0)；
* 跨瀏覽器兼容性—包括Internet Explorer (IE) 5.x for Mac；
. J$ w& e6 T) B5 m; @+ z, f, n4 K* IE Hacks使用獨立文件；
, i# }6 Q0 M" w/ f9 c! _* 快速創建模板；
* 少量註釋/實例演示，可以節省時間來理解。
; d, o& L% ~# g& ~; S$ s" n
$ j. D' z/ v* Y; M12.Content with Style Framework
+ B: g: E. {- q3 D( |+ V: m' O( h
下一個邏輯步驟就是將這個擴展為CSS框架，允許使用寫好並通過測試的組件來快速開發網站。實際上所需的是搞定一套命名習慣和一個靈活的基本模板…
, T" Q% m) g6 @0 x5 \4 ]( u+ o
2 y% j% o, \* _) D9 p) s, X  K13.Boilerplate CSS Framework
7 k1 P3 J% s- w* V6 R3 `" G! \% L# u
14.ESWAT Web Project Framework
ESWAT正在重新整理。如果你是衝著我的網站框架來的，那麼你就可以在這裡下載。也許你也想看看我的其他項目gmachina、AppleSeed。
' Q# m# U- Q0 @7 Z% a. q- }15.Tripoli CSS Framework

( V0 |6 n! L: Y% j% ~' ?4 g. cTripoli是一個用於HTML表現的通用css規範。通過重設和重建瀏覽器標準，Tripoli 為你的網站項目提供了一個標準的、跨瀏覽器表現的基礎。
0 S& H' d- ^; ~. k* Q7 J英文原文:CSS Frameworks
翻譯原文:css框架收集

我比較看重這個，我最近也自創了一個CSS框架，因為我認為一個好的CSS框架可以輕鬆製作任意精美的模板
7 q* ^/ h/ v1 B7 l$ D0 F. _" z不懂的人不知道，懂的人知道這個非常重要

Original posted by 回憶月光 at 2008-12-10 20:19
我比較看重這個，我最近也自創了一個CSS框架，因為我認為一個好的CSS框架可以輕鬆製作任意精美的模板
不懂的人不知道，懂的人知道這個非常重要

我不懂，尚在學習中，但我知道這個在seo中是很重要的，

內容太多，慢慢看

頂頂頂頂頂頂頂頂

css學習不錯，謝謝分享

圖片怎麼都看不到了

這個資源不錯，謝謝收藏了。

非常好,謝謝樓主