十大前端開發架構

原文出處http://blog.jobbole.com/41950/

編者按：考慮到英文原文的長度以及可讀性，十大前端開發架構将分成上下兩部分呈現給大家。上半部分着重講的是Bootstrap家族架構，第二節将會跟大家分享更多其他的架構。

随着網際網路的不斷成熟以及我們越來越多的用各種移動端的裝置通路網際網路，Web設計師和Web開發者的工作也變得越來越複雜。

十年前，一切都還簡單得多。那個時候，大部分使用者都是坐在桌子前通過一個大大的顯示器來浏覽我們的網頁。960像素是當時比較合理的網頁寬度。那些年我們的開發工作主要就是跟十幾個桌面浏覽器打交道，并通過添加幾個浏覽器的hack，來相容詭異的舊版本 IE 浏覽器。時至今日，随着過去五六年間手持電子裝置的突飛猛進，一切都變了樣。我們看到各種尺寸的智能手機和平闆層出不窮，電子閱讀器，以及電視裝置上的浏覽器等也不斷湧現。這種裝置的多樣性正在與日俱增。

可以預見，在不遠的将來，相對于使用桌上型電腦，越來越多的人會使用移動裝置來通路網際網路。事實上，已經有相當數量的一部分人隻通過智能手機上網。這意味着，我們這些Web設計師和開發者需要知道如何在龐大的移動端王國裡呈現以及适配我們的産品，這至關重要。在撰寫本文的時候，盡管我們還沒徹底搞明白如何将桌面端呈現的全部内容在手持裝置中呈現同樣的效果，但是用于實作這一目标的技術以及工具正在變得越來越好。

在不知道浏覽裝置螢幕大小的時候，最主要的政策就是使用響應式網頁設計。它是一種根據裝置浏覽視窗的尺寸大小來輸出相應頁面布局的方法。小型移動裝置（如智能手機以及平闆電腦）上的大多數浏覽器會預設将一個網頁縮小到适應自己的螢幕尺寸，然後使用者可以通過縮放以及滾動等方法浏覽整個網頁。這種方法在技術上是可行的，但是從使用者體驗的角度上講卻比較糟糕。小螢幕上文字太小閱讀不友善，連結太小難以點選，縮放以及滾動的操作多多少少會讓人在閱讀的時候分心。

響應式網頁設計利用同樣的HTML文檔來适配所有的終端裝置，響應式網頁設計會根據裝置螢幕的大小加載不同的樣式，進而在不同的終端裝置上呈現最優的網頁布局。舉個例子，當你在大螢幕桌面浏覽器中檢視一個網頁的時候，網頁的内容可能是分為很多列的，并且有常見的導覽列。如果你在小螢幕的智能手機上檢視同樣的頁面，你會發現頁面的内容呈現在同一列中，并且導航按鈕足夠大，點選起來很友善。你可以在Media Queries這個網站上看到很多響應式網頁設計的案例。在你的浏覽器中随便點開一個設計案例，然後改變浏覽器視窗的大小，你會看到網頁的布局會根據視窗大小相應變化。

到目前為止，我們可以看出，響應式網頁設計可以有效地幫助我們應對日益增長的終端裝置多樣性。那麼在我們設計網頁的時候有哪些實際可用的工具以及技術可以用來實作響應式網頁設計呢？我們每個人都需要成為web大師才能駕馭這門技術麼？或者是利用我們已經掌握的web基本知識就已經足夠了？目前有什麼工具可以幫到我們麼？

這時候前端開發架構華麗登場。響應式網頁設計實作起來并不困難，但是要讓它在所有的目标裝置上都正常運作會有一點小棘手。架構可以讓這一工作變得簡單。利用架構，你可以花最少的力氣建立響應式且符合标準的網站，一切都很簡單并且具有一緻性。使用架構有很多好處，比如說簡單快速，以及在不同的裝置之間的一緻性等等。架構最大的優勢就是簡單易用，即使隻掌握少量的web知識，你也可以毫無障礙的使用它們。

簡而言之，如果你認真對待目前的web開發工作，那麼使用架構進行開發就不是可選項而是必須要做的事情。你的站點必須高度靈活以适應不同的浏覽器，平闆，智能手機以及其他各種各樣的手持裝置。

一個前端開發架構其實就是一系列産品化的HTML/CSS/JavaScript元件的集合，我們可以在設計中使用它們。前端開發架構有很多，其中有一些寫得很棒。為了大家的使用便利，下文列舉了目前最強大應用最廣泛的幾款前端開發架構。記住，這些架構并不僅僅是CSS 栅格之類的一些東西，它們包括的是整套的前端開發架構。

1. Bootstrap

Boostrap絕對是目前最流行用得最廣泛的一款架構。它是一套優美，直覺并且給力的web設計工具包，可以用來開發跨浏覽器相容并且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI元件，栅格系統以及一些常用的JavaScript插件。

Bootstrap是用動态語言LESS寫的，主要包括四部分的内容：

• 腳手架——全局樣式，響應式的12列栅格布局系統。記住Bootstrap在預設情況下并不包括響應式布局的功能。是以，如果你的設計需要實作響應式布局，那麼你需要手動開啟這項功能。
• 基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖檔(image)，基礎CSS為這些要素提供了優雅，一緻的多種樣式。
• 元件——收集了大量可以重用的元件，如下拉菜單（dropdowns），按鈕組（button groups），導航面闆（navigation control）——包括：tabs,pills,lists标簽，面包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體對象（media objects）等等。
• JavaScript——包括一系列jQuery的插件，這些插件可以實作元件的動态頁面效果。插件主要包括模态視窗（modals），提示效果（tool tips），“泡芙”效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。

Bootstrap已經足夠強大，能夠實作各種形式的 Web 界面。為了更加友善地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。

• jQuery UI Bootstrap —— 對于jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面元件引入到jQuery UI中。
• jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅通路，那麼這個資源對你來說很友善易用。
• Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優化都很簡單友善。
• StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，并且你可以給每個元件都應用不同的配色。
• BootSwatchr —— 利用這個工具你可以立刻檢視主題修改後的效果。對于每一次變動的效果，這個應用都會生成一個唯一的URL友善你與他人分享，你也可以在任意時刻修改你的主題。
• Bootswatch —— 提供大量免費的Bootstrap主題。
• Bootsnipp —— 線上前端架構互動元件制作工具，是一個供給設計師和開發者的基于Bootstrap HTML/CSS/JavaScript 架構的免費元素。
• LayoutIt —— 通過界面拖放生成器簡便快捷地建立基于Bootstrap的前端代碼。通過拖放動作将Bootstrap風格的元件加入到你的個人設計裡并且可以友善地修改他們的屬性，簡單便捷。

2. Fbootstrapp

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設計相同的功能。包含用于所有标準元件的基本的CSS和HTML，包括排版、表單、按鈕、表格、栅格、導航等等，風格與Facebook類似。

3. BootMetro

BootMetro架構的靈感來自于Metro UI CSS，基于Bootstrap 架構建構，用于建立Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能，并添加了幾個額外的功能，比如頁面平鋪，應用程式欄等等。

4. Kickstrap

Kickstrap是Bootstrap的一個變體。它基于Bootstrap，并在它的基礎上添加了許多app，主題以及附加功能。這使得這個架構可以單獨地用于建構網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。

App 是一些頁面加載完成之後加載運作的JavaScript和CSS打封包件。預設加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加更多的app。

選擇不同的主題可以讓你的網站在衆多Bootstrap建構的類似網站中顯得與衆不同。

附加功能是一些用來擴充Bootstrap UI 庫的附件，它們的文法基本相同或者相似。

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以及子產品）。

總結

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