14款響應式佈局的前端開發框架

前端開發並非一個容易的工做，不只須要掌握HTML、CSS和JavaScript，針對不一樣的瀏覽器版本和平臺，還須要瞭解如何設計出跨平臺的網站。現在隨着響應式設計的流行，前端開發變得愈來愈困難，且花費的時間更長。

本文收集了14個響應式前端開發框架，能夠幫助前端開發人員大大簡化開發過程。針對每一個框架，文中均指出了它所包含的UI組件及JavaScript插件。幾乎全部的框架都採用了響應式網格系統。

使用這些前端框架，有以下好處：

• 跨瀏覽器。這一點已被證明。
• 一致性。UI組件，如導航、按鈕、標籤、表單、下拉框、表格……，在設計上保持風格一致。
• 快速開發。你能夠快速、容易地構建佈局。這些框架都配有詳細的說明文檔。
• 響應式。全部CSS組件及JavaScript插件能夠很好地從桌面過渡到移動設備上。

InK

Ink爲一個界面工具包，用於快速開發Web界面，具備易於使用、易於擴展特色。它能夠爲構建佈局提供解決方案，能夠展現普通的界面元素，能夠實現之內容爲中心、對用戶友好的交互方式。

• HTML&CSS：佈局、導航、排版、圖標、表單、提示框、表格 
• JS：Gallery、表格、樹視圖、排序列表、日期選擇插件、製表符、表單驗證及一些行爲（停靠、摺疊、關閉）
• 其餘：Sass Mixins

 GroundworkCSS Beta

GroundworkCSS是一個基於Sass預處理器的開源項目 ，主要用於快速構建響應式Web應用程序。擁有一個靈活的、可嵌套的網格系統，能夠建立適應多種瀏覽設備的佈局。GroundworkCSS還提供多種UI 組件，如導航、按鈕、圖標、表單、Tabs、對話框、工具提示等等。

• HTML&CSS：網格、佈局、排版、按鍵、標題、表單、圖標、社交圖標、響應式文本、對話框、工具提示
• JS：導航、製表符（Tab）、提示框、Cycle2
• 其餘：Sass Mixins

 Ivory

這是一個靈活、強大的響應式Web框架，使Web開發更快速、更簡單。

• HTML&CSS：網格、排版、表單、按鈕、提示框、頁碼、麪包屑導航（breadcrumb）、列表、表格
• JS：提示框、製表符（Tab）、切換開關（Toggle switch）、摺疊

 ZURB

Foundation由ZURB公司設計，ZURB是一家產品設計公司，位於加州坎貝爾。Foundation爲最早進的響應式前端開發框架，它擁有不少佈局模板、CSS樣式表及本身開發的優秀JavaScript插件。

• HTML&CSS：網格、佈局模板、圖標字體、響應式表格、SVG格式的社交圖標、頁碼、麪包屑導航（breadcrumbs）、側導航、按鍵、排版、標籤、提示框、面板、價格表、進度欄、表格、縮略圖
• JS：下拉按鈕、拆分按鈕、轉換開關、Flex視頻、燈箱、下拉、響應式佈局（經過轉換圖片大小來實現）、旅遊導航、麥哲倫全局導航（Magellan Sticky Nav）、Orbit圖片滑動幻燈片插件等
• 其餘：可定製皮膚表單（Custom Skinned Forms）、SCSS Mixin

 Grumby

Gumby 2基於Sass開發。Sass爲功能強大的CSS預處理器，利用它能夠快速開發Gumby。

• HTML&CSS：網格、表單、按鈕、導航、標籤、Entypo圖標
• JS：下拉、浮窗、製表符（Tab）、開關與轉換（Toggles & Switches）
• 其餘：可定製皮膚表單（Custom Skinned Forms）、SASS和Compass

  HTML KickStart

  該框架集合了HTML五、CSS和JavaScript，幫助開發人員快速開發Web產品。它覆蓋了全部UI組件，同時也包含一些有用的JavaScript插件。

  • HTML&CSS：網格、排版按鈕、列表、表格、圖標、麪包屑導航、圖片、表單
  • JS：菜單、代碼高亮插件、製表符（Tab）、幻燈片播放、表單驗證
  • 其餘：CSS幫助文檔

   Maxmertkit

  Maxmertkit擁有完整的文檔，包含大量實例，而且提供了拖拽生成代碼的功能。

  • HTML&CSS：網格、佈局、徽章、按鈕、表單、圖標、標籤、菜單、進度欄、表格、下拉、工具提示
  • JS：按鈕、旋轉木馬、通知、彈出框、滾動條、製表符（Tab）
  • 其餘： Sass、Coffee腳本語言

  Twitter Bootstrap

  你們對Twitter Bootstrap已十分熟悉了。憑藉全面的UI組件、易用的網格和組件，Bootstrap已成爲衆多設計者和開發者最喜歡的快速開發工具。如今已經有不少第三方Bootstrap程序和JavaScript插件可供使用。

  • HTML&CSS：網格、佈局、排版、編碼、表格、表單、按鍵、圖片、圖標、按鈕組、導航、麪包屑導航、頁碼、標籤、徽章、縮略圖、提示框、進度欄
  • JS：模態窗口（Modals）、提示效果（Tool Tips）、「泡芙」效果（Popovers）、滾動監控（Scrollspy）、旋轉木馬（Carousel）、輸入提示（Typeahead）等等。
  • 其餘：定製器（Customizer）、 LESS CSS

   Skeleton

  Skeleton 是一個小的JS和CSS文件集合，可幫你快速開發漂亮的網站，適合各類屏幕設備，包括手機。Skeleton基於960 Grid開發，是一個UI框架。

  • HTML&CSS：GRid、排版、按鈕、表單、媒體查詢（Media Queries）

   Kube

  Kube是一款最小化的，支持響應式的前端框架，包括一個簡潔的CSS文件，用於方便地建立響應式佈局，包括了兩個JS文件來完成Tab以及頁面的按鈕操做。

  • HTML&CSS：排版、網格、表單、表格、按鈕、導航、圖標
  • JS：按鈕、製表符（Tab）
  • 其餘： LESS CSS

  •