萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 細數2014年5個最流行的前端框架

細數2014年5個最流行的前端框架

   現如今快要被各種各樣的 CSS 前端框架給淹沒了,真做的不錯的其實也就那麼幾個。本文將對比五個我認為是現在最好的框架。這些框架每一個都有自己的優缺點和適用的應用類型, 你需要根據自己的需要來選擇不同的框架。

  例如,如果你的項目簡單,就不需要使用一個復雜的框架。又或者,很多框架都是模塊化的,你可以只是用你需要的模塊,或者把不同框架的模塊混到一起使用。

  我將要介紹的這些框架的順序與它們在 GitHub 的流行程度有關。自然,就是從最流行的 Bootstrap 說起。

  提示:在接下的幾周或者幾個月內,下面的一些信息很可能會過時。比如 GitHub 上的 star 數、版本號等等。如果你在文章發布很久之後來讀本文的話,一定別忘了這一點。還有,下面這些框架的大小指的是經過壓縮的必要的 CSS 和 JavaScript 文件大小。

  Bootstrap

  Bootstrap 無疑地是目前這些類庫的領跑者。它非常流行,流行程度還在一天天的增加。這個令人贊歎的工具集不會讓你失望的,在你構建成功站點之路上少不了它。

細數2014年5個最流行的前端框架 三聯

  作者:Mark Otto 和 Jacob Thornton

  發布時間:2011年

  最新版本:3.3.

  流行程度:GitHub 上 75,000+ 的 star

  介紹:“Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架,可用來開響應式的移動有限的 Web 項目。”

  核心理念/原則:響應式與移動優先

  框架大小:145 KB

  預處理器:Less 和 Sass

  響應式:是

  模塊化:是

  上手模塊/布局:是

  字體圖標:大半 Glyphicon 圖標

  插件/擴展: 無,不過有大量的第三方插件

  特色組件: 超大屏設計

  文檔: 完善

  自定義: 基礎的 GUI 自定義;不過你需要手動輸入顏色值,因為不支持顏色選擇器

  浏覽器支持: Firefox、Chrome、Safari、IE8+ (IE8 的話需要使用 Respond.js)

  開源協議: MIT

  Bootstrap 使用心得

  Bootstrap 最大的優勢就是它非常流行。從技術上講,它並不是比其他在列框架要優秀。只是它有很多資源(文章、教程、第三方插件和擴展以及主題構造器等等),比起其他四個框架合到一起還要多。簡單地講,Bootstrap 就是無處不在。這也是大家繼續使用它的原因。

  提示:當我說“特色”的組件,這種特色就是針對目前列出的這些框架而言的。

  Foundation(ZURB)

  Foundation 是這個領域的第二大玩家。擁有像 ZURB 這樣的公司在背後支持,不得不說它確實有一個非常堅實的基礎。總之,Foundation 被很多大的網站采用。包括 Facebook、Mozilla、Ebay、Yahoo 以及 National Geographic 等等。

qd201502091

  作者: ZURB

  發布時間: 2011

  最新版本: 5.4.7

  流行程度: GitHub 上 18,000+ 的 star

  介紹: “世界上最先進的響應式前端框架”

  核心理念/原則: 響應式、移動優先、語義化

  框架大小: 326 KB

  預處理器: Sass

  響應式: 是

  模塊化: 是

  上手模塊/布局: 是

  字體圖標: Foundation 字體圖標

  插件/擴展: 有

  特色組件: Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables

  文檔: 完善,還有很多其他資源

  自定義: 無 GUI 的自定義工具,需要自己手動修改

  浏覽器支持: Chrome、Firefox、Safari、IE9+;iOS、Android、Windows Phone 7+

  開源協議: MIT

  Foundation 使用心得

  Foundation 的確是一個非常專業的框架,有商業的支持、培訓以及外包。它同時還提供很多資源,幫助你更加快速更加容易地學習和使用這個框架。

  Semantic UI

  Semantic UI 一直在努力讓網站建設更加語義化。它利用了自然語言的原則,使得代碼更容易讀更容易理解。

qd201502093

  作者:Jack Lukic

  發布時間: 2013

  最新版本: 1.2.0

  流行程度: GitHub 上 12,900+ 的 star

  介紹:“一個 UI 模塊框架,基於來自自然語言的一些有用的原則。”

  核心理念/原則: 語義化、tag ambivalence、響應式

  框架大小: 552 KB

  預處理器: Less

  響應式: 是

  模塊化: 是

  上手模塊/布局: 無

  字體圖標: Font Awesome

  插件/擴展: 無

  特色組件: Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、Dimmer

  Rating、Shape

  文檔: 非常好。Semantic 有組織良好的文檔,外加一個單獨網站提供指南,幫助用戶快速上手,自定義和創建主題。

  自定義: 無 GUI 的自定義工具,需手動修改

  浏覽器支持: Firefox、Chrome、Safari、IE10+ (IE9需要prefix支持)、Android 4、Blackberry 10

  開源協議: MIT

  Semantic UI 使用心得

  在這些框架中,Semantic 是最具革命性特性最全的框架。為了讓樣式邏輯清晰,語義化,整個框架的結構以及命名約定都要優於其他框架。

  Pure(Yahoo!)

  Pure 是一個輕量的、模塊化的框架——使用純 CSS 編寫的——根據你的需要,可以組合或者分開使用 Pure 的模塊。

qd201502096

  作者: Yahoo

  發布時間: 2013

  當前版本: 0.5.0

  流行程度: GitHub 上 9,900+ 的 star

  介紹: “一系列小的,響應式的 CSS 模塊,可以用在你的每一個項目中。”

  核心理念/原則: SMACSS、極簡主義

  框架大小: 18 KB

  預處理器: 無

  響應式: 是

  模塊化: 是

  上手模塊/布局: 有

  字體圖標: 無,你可以使用 Font Awesome

  插件/擴展: 無

  特色組件: 無

  文檔: 好

  自定義: 基礎的 GUI 皮膚構造工具

  浏覽器支持: 最新的Firefox、Chrome、Safari; IE7+、iOS 6.x、7.x;Android 4.x

  開原協議: Yahoo! Inc. BSD

  Pure 使用心得

  Pure 只提供一套極簡的樣式,便於你從零開始你的項目。對於那些不需要一個全棧框架,只需要某些組件的加入到他們自己的項目中的用戶來講,這個框架非常符合。

  UIkit(YOOtheme)

  UIkit 包含了一些列簡潔的易用的便於自定義的組件。盡管它沒有其他在列的框架流行,但是它提供了相當的功能和質量。

qd201502094

  作者: YOOtheme

  發布時間: 2013

  當前版本: 2.13.1

  流行程度: GitHub 上 3,800+ 的 star

  介紹: “輕量的,模塊化的前端框架,可用來快速構建強大的網頁界面”

  核心理念/原則: 響應式、移動優先

  框架大小: 118 KB

  預處理器: Less、Sass

  響應式: 是

  模塊化: 是

  上手模塊/布局: 是

  字體圖標: Font Awesome

  插件/擴展: 有

  特色組件: Article、Flex、Cover、HTML Editor

  文檔: 好

  自定義: 高級的 GUI 自定義工具

  浏覽器支持: Chrome, Firefox, Safari, IE9+

  開原協議: MIT

  UIkit 使用心得

  UIkit 在WordPress 主題中很成功。它提供了強大靈活的自定義機制,可以手動修改或者使用它的提供的 GUI 自定義工具來實現。

  如何選擇框架?

  最後,我來給一些選擇框架的建議。下面是一些選擇框架需要注重的點:

  這個框架足夠流行嗎?流行意味著有更多的人參與到項目中來,因此,社區中有更多的文章和教程,現實中更多的示例和網站,會有更多的第三方擴展,當然能夠更好地與現實的web開發項目結合。極其流行意味著這個框架經得住未來的考驗;

  擁有龐大社區的框架最不可能被拋棄;

  框架是否還在活躍地開發中?一個優秀的框架需要不斷地提升自己,緊跟最新 Web 技術的發展,尤其對於移動來說

copyright © 萬盛學電腦網 all rights reserved