18 個最好的CSS框架用于提高開發效率
根據維基百科，CSS框架是事先準備好的庫，是為了讓使用層疊樣式表語言來美化網頁更容易，更符合標準。在這篇文章中，我們已經收集了一些現成的框架，這將使你減少你的任務流程和代碼。我們希望你會發現列表中的方便和有用的為您的開發需求。如果你知道任何其他方便和有用的CSS框架，請在評論框中，留下你的建議！
1. Pure : CSS Framework
Pure 是來自雅虎的 CSS 框架，使用 Normalize.CSS 無需任何 JavaScript 代碼。框架基于響應式設計，提供多種樣式的組件，包括表格、表單、按鈕、表、導航等。標識使用非常簡單，整個框架非常輕量級，壓縮后只有 5.7k。
2. Fitgrd : Responsive Grid System
Fitgrd is not a framework. It’s a solid foundation to build up your own responsive website. It is designed for rapid prototyping, but also runs well in production environments. This grid system is perfect for advanced web designers who don’t want to have their pages look like “bootstraped”. Everything but the grid is up to you and gives you the ability to save a lot of dispensable code.
3. Fries
Fries 是一個HTML-CSS-JS框架用于創建類似于Android原生UI的框架。可以實際項目或項目原型創建中使用。這個框架已經擁有一些主要組件如：forms, action bars, lists, buttons, spinners 和 tabs。
它還專為PhoneGap優化，可以容易地轉換為原生應用程序。
4. Markup Framework
Markup是一套布局，小組件，UI組件和字體排版樣式的框架，可以幫助你快速的執行web相關的設計和開發，相信沒有人愿意自己花時間從最基礎的層次開發web應用或者是網站，而Markup恰好很方便的幫助你解決了所有的dirty work。
主要的特性
- 使用最新的HTML5和CSS3標準
- 最小化標簽，頁面體積小
- 搜索引擎友好
- 純CSS和HTML，沒有JS
- 沒有任何的Hack
- 結構清晰，語義化
- 模塊化，很方便的混合組件
- 高效的樣式繼承，優化了性能
- 使用命名空間，減少了CSS規則沖突
- 響應式，支持移動設備
- 使用media queries
- 擴展類庫，重用界面小組件
- 整合了開源的字體
- 完整的文檔
- 快速的代碼編寫標準 </ul>
- reset.css —處理重置
- type.css —處理排版
- grid.css —處理布局
- widgets.css —處理小零件（widgets），如tab菜單、下拉菜單、以及“更多”按鈕
- base.css —包含所有的其他樣式表文件，以便我們只需要在(X)HTML引用base.css即可使用整個CSS框架 </ul>
4. Maxmertkit
Maxmertkit是一個全新的前端框架，擁有類似boostrap的UI但是提供了不同的組件內容。
這個框架使用SASS來處理CSS部分包括所有主要的網格，排版字體，表格，表單，按鈕和列表等等。
擁有豐富的“widget”，包括了，按鈕，標簽，元素分組，徽章，下拉，工具提示和菜單等等
擁有非常實用的javascript組件，例如，提示，輪播，按鈕，懸浮層等等。
和Bootstrap在某些部分上很類似，但也有區別，例如，使用字體圖標 Awasone和Zocial。
擁有完整的文檔，并且包含了大量的例子，并且提供了拖拽生成代碼的功能。
5. Metro UI CSS
Metro UI CSS 是一套實現了 Windows 8 的 Metro 風格界面的 CSS 框架。
6. Zoey : For Creating Mobile Apps
Zoey只提供一些標準的UI控件，所以非常適合于創建簡單的移動Web應用。
它是一個采用HTML5-CSS3技術實現的框架，基于Zepto.js構建，非常小gzipped壓縮后只有6kb。
Zoey擁有的UI控件包括：navigation(導航), lists(列表), buttons(按紐), control groups(控件分組), forms(表單)和 grids(表格)。
這個框架經測試支持iOS + Android，并自帶一個覆蓋所有功能的程序骨架。
7. Microjs : Tiny JS Framework
MicroJS致力于為最常見的開發任務提供JavaScript輕量庫，其上的框架或庫都不超過2KB大小，有Ajax、JSON、DOM、面向對象的JavaScript等等。
8. Lime JS
LimeJS 是一個 JavaScript 游戲開發框架，允許開發者創建基于 HTML5 的游戲，支持主流瀏覽器包括iOS。
9. 52 Framework
它是一個Web開發框架，它能實現HTML5和CSS3。它是一個跨瀏覽器的框架，可以在所有主流的瀏覽器上運行，包括IE6。主要是采用一個HTML5 enabling JavaScript file文件來實現。
10. Baseline
Baseline is a CSS framework, built with typographic standards in mind, that aims to simplify developing a website with a pleasing grid and good typography. With the help of reset.css & base.css files, Baseline clears the default behavior of your browser & builds a basic typographic layout to start with.
11. Less : HTML Powered CSS Framework
Less Framework is a lightweight CSS framework that enables you to build flexible multi-column website layouts. It contains an eight-column grid optimized for a line-height of 24px & a set of typography presets based on the golden ratio which is parallel to the grid’s vertical rhythm.
12. Gumby 2 : Responsive CSS Framework
Gumby is a responsive and 960px-grid CSS grid framework that can be customized to work in every resolution, it is quite similar to 推ter Bootstrap, it comes with a web UI Kit of good looking buttons, forms, navigation + tabs and a tiny JavaScript file that brings these components to life.
13. Formee : CSS Form Framework
Formee is a CSS framework that helps you to easily create cross-browser web forms. It works with the technique provided by Fluid 960 Grid System to compose the form’s layout, allowing total flexibility to put it in any website or web system. -
14. Golden Grid System
Golden grid a web grid system that is totally focused on grid-based designs (not a complete CSS framework). Golden Grid uses float:left approach for building grids rather than positions. It is a 6/12 column grid system with a 970px main width.
15. 推ter Bootstrap : CSS Toolkit by 推ter
Bootstrap 是基于 HTML，CSS，JavaScript 的簡潔靈活的流行前端框架及交互組件集，由微博的先驅 推ter 在2011年8月開源的整套前端解決解決方案。
16. 960 GS
960GS/960網格系統，更為靈活的網格設計，輔助網頁設計師更好的進行設計
17. BluePrint
blueprint是一個所謂的css framework，相比較而言blueprint代碼中的注釋還是比較詳細的。
按照Jeff Croft的Frameworks for Designers(或中文版本理解Web框架，和如何構建一個CSS框架)描述的如何構建一個css framework的方法：
構建一個框架有幾種可能的方式，但最常見，可以說是最有用的，抽象通用的CSS放到一個獨立樣式表文件，該樣式表文件只包含整體的一個特有部分。例如,你可以，一個樣式處理排版，另一個處理大量重置。這種好的方法能使你選擇性引入你需要的樣式，在你框架里可能有六七個不同的樣式文件，但不需要其中的一兩個，只要不引入即可。我們團隊創建的框架包含5個樣式文件：
然后，我們把框架存放在一個單獨的地方，使每一個站點都引入這個框架。當然，每一個網站也需要有特有樣式表，特有樣式對框架進行了必要的補充。
18. YAML
YAML (”Yet Another Multicolumn Layout”) 是一個 (X)HTML/CSS 框架，它為了滿足彈性的和用戶友好的布局而開發的。YAML自2007年出現以來就提供了廣而全的文檔。像許多其他的CSS-Framework如Blueprint CSS 或 YUI Grids 一樣，提供了一個預定義的 CSS-classes 系統，用來創建基于網格的布局。要創建一個布局，設計師需要創建網站 HTML 結構，然后為容器（html標簽）書寫CSS，剩下的就自理了。
YAML 是走不同的路線，他支持基于網格的布局開發，也支持網格系統開發，但都是強調彈性都布局。如果有設計師想要創建基于網格都布局，他可以使用三列，頭部和尾部的基本框架。每個元素都能夠移動或者適應用戶都需求。真實都設計中，列的位置是使用 CSS來定義的（在其它都 CSS 框架中使用都是 html 結構來做的）。對設計師都好處：使用 YAML 你定義類時能得到更好都選擇，使用任何尺寸的單元并得到干凈都代碼。