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.

Source

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
• 擴展類庫，重用界面小組件
• 整合了開源的字體
• 完整的文檔
• 快速的代碼編寫標準

 

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 Twitter 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. Twitter Bootstrap : CSS Toolkit by Twitter

Bootstrap 是基於 HTML，CSS，JavaScript 的簡潔靈活的流行前端框架及交互組件集，由微博的先驅 Twitter 在2011年8月開源的整套前端解決解決方案。

 

16. 960 GS

960GS/960網格系統，更爲靈活的網格設計，輔助網頁設計師更好的進行設計

 

17. BluePrint

blueprint是一個所謂的css framework，相比較而言blueprint代碼中的註釋仍是比較詳細的。

按照Jeff Croft的Frameworks for Designers(或中文版本理解Web框架，和如何構建一個CSS框架)描述的如何構建一個css framework的方法：

構建一個框架有幾種可能的方式，但最多見，能夠說是最有用的，抽象通用的CSS放到一個獨立樣式表文件，該樣式表文件只包含總體的一個特有部分。例如,你能夠，一個樣式處理排版，另外一個處理大量重置。這種好的方法能使你選擇性引入你須要的樣式，在你框架裏可能有六七個不一樣的樣式文件，但不須要其中的一兩個，只要不引入便可。咱們團隊建立的框架包含5個樣式文件：

• reset.css —處理重置
• type.css —處理排版
• grid.css —處理佈局
• widgets.css —處理小零件（widgets），如tab菜單、下拉菜單、以及「更多」按鈕
• base.css —包含全部的其餘樣式表文件，以便咱們只須要在(X)HTML引用base.css便可使用整個CSS框架

而後，咱們把框架存放在一個單獨的地方，使每個站點都引入這個框架。固然，每個網站也須要有特有樣式表，特有樣式對框架進行了必要的補充。

 

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 你定義類時能獲得更好都選擇，使用任何尺寸的單元並獲得乾淨都代碼。