最流行的5個CSS框架比照

  • 時間:2018-12-21 23:07 作者:前端小學生 來源:前端小學生 閱讀:280
  • 掃一掃,手機訪問
摘要:如今出現了大量的CSS前臺框架,但真正優秀的框架只有少數幾個。本文將會比較其中五個最佳的框架。每個框架都有自己的優點和缺點,以及具體的應用領域,你可以根據自己的具體項目需求進行選擇。此外,許多選項都是板塊化的,允許你僅使用所需的組件,甚至可以混合使用來自不同框架的組件。本文依據各個框架的GitHub

如今出現了大量的CSS前臺框架,但真正優秀的框架只有少數幾個。

本文將會比較其中五個最佳的框架。每個框架都有自己的優點和缺點,以及具體的應用領域,你可以根據自己的具體項目需求進行選擇。此外,許多選項都是板塊化的,允許你僅使用所需的組件,甚至可以混合使用來自不同框架的組件。

本文依據各個框架的GitHub流行度來順序詳情。

Foundation

Foundation是排在第二名的框架。ZURB這樣堅實的公司一直支持著Foundation,所以這個框架有強大的基礎。Foundation現已用于許多大型網站,包括Facebook,Mozilla,Ebay,Yahoo!和國家地理等。

最流行的5個CSS框架比照

  • 創作者: ZURB
  • 發行: 2011
  • 當前版本: 6.3.1
  • 人氣: GitHub上有25,400顆星
  • 說明: “世界上最先進的響應式前臺框架”
  • 核心概念/準則: RWD,手機端優先,語義。
  • 框架大小: 197.5 KB
  • 預解決器: Sass
  • 響應式布局:是
  • 板塊化:是
  • 啟動模板/布局:是
  • 圖標集: 基礎圖標字體
  • 額外/附加組件:是
  • 獨特的組件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • 文檔資源:良好,還有許多額外資源。
  • 自定制:基本的GUI定制程序,相似于Bootstrap定制工具。瀏覽器支持: Chrome,Firefox,Safari,IE9 +; iOS,Android,Windows Phone 7+
  • 許可證:MIT

Foundation說明

Foundation是一個真正的專業框架,提供業務支持、培訓和咨詢。它還提供了許多資源來幫助你更快更輕松地學習和使用該框架。

Semantic UI

Semantic UI是一個語義化設計的前臺開源框架。它利用自然語言原理,從而使代碼更加可讀和可了解。

最流行的5個CSS框架比照

  • 創作者: Jack Lukic
  • 發行: 2013
  • 當前版本: 2.2
  • 人氣: GitHub上有34,762顆星
  • 說明: “基于自然語言準則的UI組件框架”。
  • 核心概念/準則:Semantic, tag ambivalence, responsive。
  • 框架大小: 806 KB
  • 預解決器:少
  • 響應式布局:是
  • 板塊化:是
  • 啟動模板/布局:是,并提供了少量基本的入門模板
  • 圖標集: Font Awesome
  • 額外/附加組件:否
  • 獨特的部件:Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。
  • 文檔資源:非常好,Semantic提供了一個非常有組織的文檔,另外還有一個單獨的網站提供入門指南、自己設置和創立主題。
  • 自己設置:沒有GUI定制器,只有手動定制。瀏覽器支持: Firefox,Chrome,Safari,IE10 +(僅IE9瀏覽器前綴),Android 4,Blackberry 10
  • 許可證:MIT

Semantic UI說明

Semantic是這里所探討的所有框架中,最具創新性和全功能的框架。其框架的總體結構、類中清晰邏輯的命名商定方式和語義方面也超過了其它框架。

Bootstrap

Bootstrap是目前可用框架中無可爭議的領導者。其人氣日益增長,你可以放心的選擇這個框架,而不必擔心項目會失敗,由于具備廣泛使用基礎的框架,不太可能被拋棄。

最流行的5個CSS框架比照

  • 創作者: Mark Otto 和 Jacob Thornton.
  • 發行: 2011
  • 當前版本: 3.3.7人氣:
  • GitHub上有111,000顆星
  • 說明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在網絡上開發響應式、移動的Web項目。
  • 核心概念/準則: RWD和手機端優先。
  • 框架大小: 154 KB
  • 預解決器: Less和Sass
  • 響應式布局:是
  • 板塊化:是
  • 啟動模板/布局:是
  • 圖標集: Glyphicons Halflings設置
  • 附加/附件:無捆綁,許多第三方插件可用。獨特組件: Jumbotron
  • 文檔資源:良好
  • 自定制:基本GUI定制器。但是你需要手動輸入顏色值,由于沒有顏色選擇器可用。
  • 瀏覽器支持: Firefox,Chrome,Safari,IE8 +(您需要IE8的Respond.js)
  • 許可證: MIT

Bootstrap說明

Bootstrap的廣泛流行是它的優勢所在。在技術上,它不肯定比列表中的其它框架更好,但它提供了比其它四個框架更多的資源(文章和教程、第三方插件和擴展、主題構建器等)。簡而言之,Bootstrap 無處不在,這是人們繼續選擇的主要起因。

Pure

Pure是一種輕量級的板塊化框架,采用純CSS編寫,具備可根據需要一起使用或者單獨使用的組件。

最流行的5個CSS框架比照

  • 創作者:雅虎
  • 發行: 2013
  • 當前版本: 0.6.2
  • 流行度: GitHub上有16,637顆星說明: “一套小而靈活的CSS板塊,能夠在每個Web項目中使用。”
  • 核心概念/準則: SMACSS,極簡主義。
  • 框架大小: 16 KB
  • 預解決:無
  • 響應式布局:是
  • 板塊化:是
  • 啟動模板/布局:是
  • 圖標集:無。可以改用Font Awesome。
  • 額外/附加組件:無
  • 獨特組件:無
  • 文檔資源:很好
  • 自己設置:基本GUI皮膚生成器
  • 瀏覽器支持:最新版本的Firefox,Chrome,Safari; IE7 +; iOS 6.x,7.x; Android 4.x
  • 許可證: Yahoo! Inc. BSD

Pure說明

Pure為你的項目提供了一個干凈的開始,只提供基本框架。對于不需要全功能框架但僅包含在其工作中的特定組件的人來說,pures是一個理想的選擇。

UIkit

UIkit是一個易于使用和自己設置的組件的簡潔集合。盡管它不像其它框架那樣受歡迎,但它提供了相同的功能和質量。

最流行的5個CSS框架比照

  • 創造者: YOOtheme
  • 發行: 2013
  • 當前版本: 3.0.0
  • 人氣:GitHub GitHub上有9,422顆星
  • 說明: “用于開發快速而強大的Web界面的輕量級和板塊化的前臺框架”。
  • 核心概念/準則: RWD,手機端優先
  • 框架大小: 326.9 KB(假如包含uikit-icons.min.js與SVG圖標相關的功能,則為384.4 KB )
  • 預解決器:少,
  • Sass響應式布局:是
  • 板塊化:是
  • 啟動模板/布局:是圖標集: UIkit自帶SVG圖標系統和類庫,其中包含越來越多的大綱圖標。
  • 額外/附加組件:是
  • 獨特的組件:Article, Flex, Cover, HTML Editor
  • 文件:好
  • 自己設置:高級GUI定制程序僅在版本2(以前的版本)中可用
  • 瀏覽器支持: Chrome,Firefox,Safari,IE9 +
  • 許可證:MIT

UIkit說明

UIkit成功應用在許多WordPress主題中。它提供了靈活和強大的手動定制機制(以前版本的框架還提供了高級GUI定制程序)。

什么是最適合你的框架?

在選擇框架時,可以從以下幾個方面考慮:

  • 所選的框架有足夠的人氣嗎?更多的人氣意味著更多的人參加項目,也意味著有更多的教程和社區文章、更多的實例和網站、更多的第三方擴展、更好的相關的Web產品可與其集成。受歡迎程度也意味著框架更具前瞻性,由于具備更大社區的框架不太可能被拋棄。
  • 框架能否正在積極發展?一個好的框架需要不斷地使用最新的web技術,特別是在手機端方面。框架能否達到成熟?假如一個特定的框架在現實項目中還沒有被使用和測試,那么將其用于你的專業項目,可能不是一個明智的選擇。
  • 框架能否提供了良好的文檔?為了方便學習過程,總是需要良好的文檔。
  • 框架的特異性是什么?這里的要點是,與具備高級別特異性的框架相比,更通用的框架更容易使用。
  • 在大多數情況下,最好選擇一個應用最小樣式的框架,由于它更容易自己設置。與重寫現有的CSS規則相比,增加新的CSS規則是一個更方便有效的做法。

假如你還不確定使用哪個框架,那么可以采用混合搭配的方式。當某個特定的框架不能滿足你的需求時,可以混合使用兩個或者多個項目的組件。

最后值得一提的是,現在Flexbox和Grid Layout在主流瀏覽器的最新版本中得到很好的支持,比以往任何時候都更容易構建復雜的布局。這可能會鼓勵更多的開發人員放棄前臺框架,從頭開始編寫他們自己想要的布局。

原文地址:https://zhuanlan.zhihu.com/p/39837067

  • 全部評論(0)
最新發布的資訊信息
【系統環境|數據庫】零基礎如何快速學好大數據?(2019-06-29 12:27)
【系統環境|Linux】零基礎如何學好大數據?必備需要學習知識(2019-06-18 11:54)
【系統環境|】Hadoop環境中管理大數據存儲八大技巧(2019-06-15 11:01)
【系統環境|服務器應用】現在國內IT行業是不是程序員過多了?(2019-06-11 06:34)
【系統環境|服務器應用】新貴 Flutter(2) 自己設置 Widget(2019-06-11 06:34)
【系統環境|服務器應用】Android完整知識體系路線(菜鳥-資深-大牛必進之路)(2019-06-11 06:34)
【系統環境|服務器應用】Java程序員小伙經歷三個月備戰,終獲阿里offer(2019-06-11 06:34)
【系統環境|服務器應用】每日一問:談談對 MeasureSpec 的了解(2019-06-11 06:34)
【系統環境|服務器應用】【科普】晶體管-1(2019-06-11 06:34)
【系統環境|服務器應用】一個很多人都會答錯的java基礎題(2019-06-11 06:33)
手機二維碼手機訪問領取大禮包
返回頂部
免费资料铁四肖中特