你應該知道的9個優秀的CSS框架

釋懷發表於2015-05-14
1、Twitter開源傑作 - Bootstrap

Bootstrap是一款由Twitter推出的開源CSS框架,它的核心是由一系列用於Web前端開發的工具包組成。Bootstrap基於HTML、CSS和JavaScript,是一款非常適合敏捷Web開發的CSS框架,Bootstrap同時也是Github上最熱門的開源專案之一。


Bootstrap的特點
  • 強大的開發團隊。Bootstrap由Twitter的設計師Mark Otto和Jacob Thornton合作開發,Bootstrap開發團隊也是國際上公認最優秀的前端開發團隊之一。
  • 極簡的框架。Bootstrap的設計非常簡單,這就意味著,無論你是高階的前端設計師,還是普通的程式設計師,都能夠很快地掌握Bootstrap的開發流程和開發方式。
  • 跨裝置、跨瀏覽器最初設想的Bootstrap只支援現代瀏覽器,不過新版本已經能支援所有主流瀏覽器,甚至包括IE7。從Bootstrap 2開始,提供對平板和智慧手機的支援。
  • 完美的響應式設計。Bootstrap支援響應式佈局,可以智慧識別客戶端瀏覽器的型別,從而構造適應當前裝置前端佈局,這一切都是全自動的。
  • 支援HTML5和CSS3。Bootstrap支援所有的HTML5標籤和CSS3屬性。
  • 使用LESS構建動態樣式。當傳統的枯燥CSS寫法止步不前時,LESS技術橫空出世。LESS使用變數、巢狀、操作、混合編碼,幫助使用者花費很小的時間成本,編寫更快、更靈活的CSS。

2、扁平化UI開發包 - Flat UI

Flat UI是一款基於Bootstrap的扁平化前端UI工具包,Flat UI的元件外觀設計非常清新和漂亮,Flat UI的元件包含按鈕,輸入框,組合按鈕,核取方塊,單選按鈕,標籤,選單,進度條和滑塊等精美的元素。


Flat UI的特點
  • 包含很多基本的使用者介面,同時也可以靈活建立更多自定義的UI介面元件
  • 包含豐富的向量圖示和符號
  • 自定義調色盤
  • 基於HTML / CSS、JavaScript的佈局

3、語義化前端開發框架 - Semantic UI

Semantic UI 是一款語義化的前端開發框架,Semantic是圍繞自然交流語言而架構的,這使得開發更加直觀(易於理解)。跟Bootstrap不同,Semantic在功能特性上、佈局設計上、使用者體驗上更貼近自然語言。



Semantic UI的特點
  • 文件和演示非常完善
  • 易於學習和使用
  • 配備網格佈局
  • 支援 Sass 和 LESS 動態樣式語言
  • 有一些非常實用的附加配置,例如inverted類。
  • 對於社群貢獻來說是比較開放的。
  • 有一個非常好的按鈕實現,情態動詞,和進度條。
  • 在許多功能上使用圖示字型。
4、Metro風格的CSS框架 - BootMetro

Flat UI一樣,BootMetro同樣也是一款基於Bootstrap的CSS框架,BootMetro的最大特點在於它是一款Win 8 Metro風格的CSS框架。Metro風格的優勢在於介面簡潔平滑,UI元素簡單,載入速度快,並且有不錯的視覺效果。


BootMetro的特點
  • 基於強大的Twitter Bootstrap,框架的靈感源於 Metro UI CSS
  • 讓使用者更專注於網站的內容,因為Metro風格可以更加突出網頁的主要內容。
  • 完全免費,和Bootstrap一樣,BootMetro的使用也是非常簡單。

5、雅虎開源傑作 – Pure

Pure也是一款很出色的CSS框架,之前分享的Bootstrap是由Twitter出品的,而Pure是來自雅虎的。儘管從UI介面效果上來說,Pure沒有Bootstrap那樣精美,但Pure是純CSS實現的,因此非常小巧,整個框架壓縮後只有5.7k左右。

Pure的特點
  • 最大的特點就是框架基於純CSS,無任何JavaScript程式碼,渲染速度比較快。
  • 由Yahoo出品,技術上應該不存在太大問題。
  • 框架十分小巧,壓縮後僅5.7k。
  • 元件也很豐富,包括表格、表單、按鈕、表、導航等。
  • CSS類的標識十分簡單,因此在使用Pure的過程中程式碼會比較友好。

6、Win 8 Metro風格的CSS框架 - Metro UI CSS

Metro UI CSS 是一款Win 8 Metro風格的CSS框架,同時,之前介紹過的那款BootMetro也是基於Metro UI CSS的,我們可以利用Metro UI CSS構建很棒的Metro風格應用。


Metro UI CSS 的特點
  • Win 8 Metro風格,介面清爽平滑
  • 學習非常簡單
  • 原始碼很小巧
  • 基於MIT開源協議

7、免費的Bootstrap主題包 - Bootswatch

Bootswatch 是一款基於 Bootstrap 的免費主題包,其中包含了豐富的 Bootstrap 主題,你可以下載安裝這些主題的 CSS 檔案,實現各種各樣漂亮的 Bootstrap 主題風格。

Bootswatch 的特點
  • 安裝非常方便。只需要下載對應主題的CSS檔案,替換原來的檔案即可,無需安裝二進位制檔案。
  • 完全開源。基於MIT開源協議,你也可以前往Bootswatch的開源社群進行問題討論。
  • 模組化。可以更加靈活地控制和改變樣式。
  • 外掛化。已經為各個平臺提供了API,如果你在使用NodeBBBootSnap,那麼就更加方便了。
  • 持續更新中。更新和維護是一款優秀開源軟體的標誌。

8、整合在jQuery UI上的Bootstrap - jQuery UI Bootstrap

jQuery UI Bootstrap是一個將jQuery UI整合到Bootstrap上的CSS框架,jQuery UI Bootstrap不僅可以利用jQuery UI強大的控制元件庫,同時還可以享受Bootstrap那種清新自然的主題風格,所以越來越多的前端開發者都在使用jQuery UI Bootstrap。


jQuery UI Bootstrap的特點
  • 基於jQuery UI,因此控制元件功能非常強大,可以使用全部的jQuery UI控制元件。
  • 基於Bootstrap,不同控制元件有了統一的外觀。
  • 免費開源,你可以很方便地下載和使用。

9、輕量級CSS佈局排版框架 – EZ-CSS

EZ-CSS是一款輕量級的CSS佈局排版框架,EZ-CSS和其他的CSS框架有很大的不同,因為它很小,才1kb。而且EZ-CSS的擴充套件性很強,對瀏覽器相容性較為友好,利用EZ-CSS,你可以快速的實現較為複雜的網頁佈局排版。


EZ-CSS的特點
  • 最大的特點就是框架很小,才1K,因此可以將其整合到任何相應的樣式表中。
  • 簡化排版,原先需要很複雜的CSS程式碼才實現的排版佈局,EZ-CSS可以分分鐘搞定。
  • 輕鬆實現多列布局,並且可以指定任意的寬度。
還有很多優秀的CSS框架,我們正在為大家努力收集,希望這些CSS框架資源對你有所幫助。
相關閱讀
評論(1)

相關文章