十大前端開發框架(下)

厲瑤發表於2013-07-01

在《十大前端開發框架(上)》中我們瞭解了跟Bootstrap相關的一系列前端開發框架,如果你對於Bootstrap已經審美疲勞了,那麼請深吸一口氣,接下來將帶給你一些其他口味的框架。讓我們先從Bootstrap最有力的競爭者Foundation說起。

 

5. Foundation

Foundation 是一款強大的,功能豐富的並且支援響應式佈局的前端開發框架,你可以通過Foundation快速建立原型,利用它所包含的大量佈局框架,元素以及最優範例快速建立在各種裝置上可以正常執行的網站以及app。Foundation在構建的時候秉承移動優先的策略,它擁有大量實用的語義化功能,並且使用Zepto類庫來取代jQuery,這樣可以帶來更好的使用者體驗,並且提高執行的速度。

Foundation擁有一套12列的靈活可巢狀的網格系統,你可以用它快速建立適應多種瀏覽裝置的佈局。它有很多的功能。它定義了很多的樣式,比如字型排版,按鈕,表單,以及多種多樣的導航控制元件。它也提供了很多的CSS元件,例如操作皮膚(panels),價格表(price tables),進度條(progress bars),表格(tables)以及可以適應不同裝置的可伸縮視訊(flex video)。與此同時,Foundation還包括了很多的JavaScript外掛,如下拉選單(dropdowns),joyride(網站功能引導外掛),magellan(網站固定導航外掛),orbit(支援觸控的響應式圖片輪播外掛),reveal(彈出框外掛),sections(強大的tab外掛)以及tooltips(工具提示)等。

Foundation框架還提供了很多有用的擴充套件。

  • 模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及向量PDF兩種格式的下載,你可以用它們來方便快捷的繪製線框圖和原型圖。
  • HTML模板 —— HTML模板可以方便地用來快速建立頁面佈局。你所要做的僅僅是複製得到模板程式碼,然後丟到頁面的標籤之間就好了。
  • 圖示字型(Icon Fonts) —— 包含自定義圖示的一種網頁字型。
  • SVG 社交網路圖示(Social Icons)—— 一組不依賴解析度的社交網路圖示(可縮放向量圖示)。
  • 響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列,然後表格的其他列可以通過滾動條拖拉進行訪問。
  • 關閉帆布佈局(Off-Canvas Layouts)—— 這些佈局可以允許一些網頁內容或者導航控制元件在移動端裝置上預設隱藏,當瀏覽螢幕變大或者使用者進行相應操作的時候這些內容再出現。當使用者進行相關操作的時候,網頁內容或者導航控制元件將會滑動出現。

如你所見,對於web開發者以及設計師來說,Foundation就像是一個巨大的寶藏。在下載框架的時候,你可以自定義下載框架的內容。

 

6. GroundworkCSS

GroundworkCSS 是前端框架家族裡面新添的一款小清新框架。它是基於Sass和Compass的一個高階響應式的HTML5,CSS以及JavaScript工具包,可以用於快速建立原型並且建立在各種瀏覽裝置上可以正常工作的網站和app。

GroundworkCSS擁有一個靈活,可巢狀的流式網格系統,方便你建立任何佈局。這個框架有很多讓人印象深刻的功能,比如在平板以及移動端上的網格系統,當螢幕的寬度小於768或者480畫素時,頁面中原本並列排版的表格列(grid column)會自動變為獨立的行,而不是摺疊在一起。另一個很酷的功能是jQuery的響應式文字(ResponsiveText)外掛,這個外掛可以動態調整頁面文字的大小以適應瀏覽裝置的螢幕大小。這個外掛對於可伸縮的標題以及建立響應式表格的時候特別有用。

GroundworkCSS包含了大量的UI元件,如tabs、響應式資料表格導航、按鈕、表單、響應式導航控制元件、tiles(一套替代radio按鈕以及其他預設表單元素的優雅元件)、工具提示、對話方塊、Cycle2(一款強大的,響應式的內容滑塊)以及其他很多的有用元件。它還提供了很多向量社交網路圖示以及圖示字型。

你可以通過切換頁面上方的導航按鈕選擇不同的瀏覽裝置要來檢視這款框架的效果。通過這種方式,你可以測試在不同的瀏覽裝置上各種元件的響應式佈局情況。

GroundworkCSS的文件寫的非常好,並且包含著很多的示例,為了讓你更快的上手,他還提供了多種響應式的模板。對於這款框架,唯一我可以想到的缺點就是不能自定義要下載的框架內容。

 

7. Gumby

Gumby 是一款基於Sass和Compass的簡單靈活並且穩定的前端開發框架。

它的流式-固定佈局(fluid-fixed layout)可以根據桌面端以及移動裝置的解析度自動優化要呈現的網頁內容。它支援多種網格佈局,包括多列混雜的巢狀模式。Gumby提供兩套PSD的模板,方便你在12列和16列的網格系統上進行設計。

Gumby提供了一個功能豐富的UI工具包,包括按鈕,表單,移動端導航,tabs,跳轉連結(skip links),撥動開關(toggles and switches,可以方便快捷地切換元素的class,而不需要進行額外的js操作),抽屜功能(drawers),響應式圖片以及retina圖片等等。為了緊跟最近的設計潮流,Gumby的UI元素中還包括了Metro風格的扁平化設計,你也可以用Pretty風格的漸變設計,或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式,擁有獨立解析度的Entypo圖示,你可以在自己的web專案中盡情使用。

Gumby有一個很好自定義下載選擇器,你可以自行配置各個元件的顏色,並且按自己的需求方便地下載。

 

8. HTML KickStart

HTML Kickstart 是一款可以用來方便建立任何佈局的集合HTML5,CSS和jQuery的工具包。它提供了乾淨,符合標準以及跨瀏覽器相容的程式碼。

這款框架提供了多種樣式表,包括網格,排版,表單,按鈕,表格,列表以及一些跨瀏覽器相容的web元件比如JavaScript的幻燈片功能,tabs,麵包屑導航,包含子選單的選單以及工具提示等等。

你可以使用99Lime UIKIT提供的UI元件來搭建你的產品線框圖。

 

9. IVORY

IVORY 是一款輕量,簡單但是強大的前端框架,可以用於320到1200畫素寬度的響應式佈局。它基於12列的響應式網格佈局,包含表格,按鈕,表格,分頁,撥動開關,工具提示,手風琴,選項卡等網站中常用的元件和樣式。

當你需要一款輕量靈活,不需要額外的其他功能,並且適應不同瀏覽裝置的框架時,IVORY是你最好的選擇。

 

10.Kube

最後,如果你的新專案需要一款實在的,不需要複雜的額外功能元件的,足夠簡單的框架,那麼 Kube 將會是你正確的選擇。Kube是一款最小化的,支援響應式的前端框架,它沒有強加的樣式設計,因此給了你充分的自由來開發自己的樣式表。它提供了一些web元素的基本樣式,比如網格,表單,排版,表格,按鈕,導航,連結以及圖片等等。

Kube框架包括一個簡潔的CSS檔案用於方便地建立響應式佈局,還包括了兩個JS檔案來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個性化定製,那麼你可以下載開發者版本(developer version),這個版本包括了LESS檔案(包括各種變數,mixins以及模組)。

 

總結

我希望看過本文之後,當你為新專案選擇框架時,能夠對各種各樣的框架有更好的認識。在文章中,我嘗試著列出了我所知道的目前應用最廣泛,功能最全面,結構最優的一些前端開發框架。不過如你所知,大千世界,瞬息萬變,因此,如果你知道本文中沒有列出的其他的優秀開發框架,歡迎你在評論中與我們分享,這樣會使本文更加有幫助,謝謝。

相關文章