前端開發並不是一個容易的工作，不僅需要掌握HTML、CSS和JavaScript，針對不同的瀏覽器版本和平臺，還需要了解如何設計出跨平臺的網站。如今隨着響應式設計的流行，前端開發變得越來越困難，且花費的時間更長。
本文收集了14個響應式前端開發框架，可以幫助前端開發人員大大簡化開發過程。針對每個框架，文中均指出了它所包含的UI組件及JavaScript插件。幾乎所有的框架都採用了響應式網格系統。
使用這些前端框架，有如下好處：
- 跨瀏覽器。這一點已被證實。
- 一致性。UI組件，如導航、按鈕、標籤、表單、下拉框、表格……，在設計上保持風格一致。
- 快速開發。你可以快速、容易地構建佈局。這些框架都配有詳細的說明文檔。
- 響應式。所有CSS組件及JavaScript插件可以很好地從桌面過渡到移動設備上。
Ink爲一個界面工具包，用於快速開發Web界面，具有易於使用、易於擴展特點。它可以爲構建佈局提供解決方案，可以展示普通的界面元素，可以實現以內容爲中心、對用戶友好的交互方式。
- HTML&CSS：佈局、導航、排版、圖標、表單、提示框、表格
- JS：Gallery、表格、樹視圖、排序列表、日期選擇插件、製表符、表單驗證及一些行爲（停靠、摺疊、關閉）
- 其他：Sass Mixins
GroundworkCSS是一個基於Sass預處理器的開源項目 ，主要用於快速構建響應式Web應用程序。擁有一個靈活的、可嵌套的網格系統，可以創建適應多種瀏覽設備的佈局。GroundworkCSS還提供多種UI 組件，如導航、按鈕、圖標、表單、Tabs、對話框、工具提示等等。
- HTML&CSS：網格、佈局、排版、按鍵、標題、表單、圖標、社交圖標、響應式文本、對話框、工具提示
- JS：導航、製表符（Tab）、提示框、Cycle2
- 其他：Sass Mixins
這是一個靈活、強大的響應式Web框架，使Web開發更快速、更簡單。
- HTML&CSS：網格、排版、表單、按鈕、提示框、頁碼、麪包屑導航（breadcrumb）、列表、表格
- JS：提示框、製表符（Tab）、切換開關（Toggle switch）、摺疊
Foundation由ZURB公司設計，ZURB是一家產品設計公司，位於加州坎貝爾。Foundation爲最先進的響應式前端開發框架，它擁有很多佈局模板、CSS樣式表及自己開發的優秀JavaScript插件。
- HTML&CSS：網格、佈局模板、圖標字體、響應式表格、SVG格式的社交圖標、頁碼、麪包屑導航（breadcrumbs）、側導航、按鍵、排版、標籤、提示框、面板、價格表、進度欄、表格、縮略圖
- JS：下拉按鈕、拆分按鈕、轉換開關、Flex視頻、燈箱、下拉、響應式佈局（通過轉換圖片大小來實現）、旅遊導航、麥哲倫全局導航（Magellan Sticky Nav）、Orbit圖片滑動幻燈片插件等
- 其他：可定製皮膚表單（Custom Skinned Forms）、SCSS Mixin
Gumby 2基於Sass開發。Sass爲功能強大的CSS預處理器，利用它可以快速開發Gumby。
- HTML&CSS：網格、表單、按鈕、導航、標籤、Entypo圖標
- JS：下拉、浮窗、製表符（Tab）、開關與轉換（Toggles & Switches）
- 其他：可定製皮膚表單（Custom Skinned Forms）、SASS和Compass
該框架集合了HTML5、CSS和JavaScript，幫助開發人員快速開發Web產品。它覆蓋了所有UI組件，同時也包含一些有用的JavaScript插件。
- HTML&CSS：網格、排版按鈕、列表、表格、圖標、麪包屑導航、圖片、表單
- JS：菜單、代碼高亮插件、製表符（Tab）、幻燈片播放、表單驗證
- 其他：CSS幫助文檔
Maxmertkit擁有完整的文檔，包含大量實例，並且提供了拖拽生成代碼的功能。
- HTML&CSS：網格、佈局、徽章、按鈕、表單、圖標、標籤、菜單、進度欄、表格、下拉、工具提示
- JS：按鈕、旋轉木馬、通知、彈出框、滾動條、製表符（Tab）
- 其他： Sass、Coffee腳本語言
大家對Twitter Bootstrap已十分熟悉了。憑藉全面的UI組件、易用的網格和組件，Bootstrap已成爲衆多設計者和開發者最喜歡的快速開發工具。現在已經有很多第三方Bootstrap程序和JavaScript插件可供使用。
- HTML&CSS：網格、佈局、排版、編碼、表格、表單、按鍵、圖片、圖標、按鈕組、導航、麪包屑導航、頁碼、標籤、徽章、縮略圖、提示框、進度欄
- JS：模態窗口（Modals）、提示效果（Tool Tips）、“泡芙”效果（Popovers）、滾動監控（Scrollspy）、旋轉木馬（Carousel）、輸入提示（Typeahead）等等。
- 其他：定製器（Customizer）、 LESS CSS
Skeleton 是一個小的JS和CSS文件集合，可幫你快速開發漂亮的網站，適合各種屏幕設備，包括手機。Skeleton基於960 Grid開發，是一個UI框架。
- HTML&CSS：GRid、排版、按鈕、表單、媒體查詢（Media Queries）
Kube是一款最小化的，支持響應式的前端框架，包括一個簡潔的CSS文件，用於方便地創建響應式佈局，包括了兩個JS文件來完成Tab以及頁面的按鈕操作。
- HTML&CSS：排版、網格、表單、表格、按鈕、導航、圖標
- JS：按鈕、製表符（Tab）
- 其他： LESS CSS
Helium是一個前端響應式Web框架，使用HTML5、CSS3快速製作原型以及開發產品。Helium很像Twitter Bootstrap和ZURB Foundation，事實上，Helium使用了兩者不少的代碼。但與這兩個框架不同的是，Helium設計更加輕量級，而且更容易修改。Helium只有30KB左右，而Bootstrap有100KB，ZURB有200多KB。
- HTML&CSS：網格、按鈕、排版、表單
- JS：下拉、表單驗證
- 其他：Sass、Compass
Markup是一套集佈局、小組件、UI組件和字體排版樣式爲一體的框架。它可以作爲你設計自己網站的起點。
- HTML&CSS：佈局、網格、排版、表單、按鈕、麪包屑導航、導航列表、導航菜單
- JS：沒有JavaScripts，只有單純的CSS
TopCoat是一套免費的開源UI元素類庫，整套類庫不使用任何JavaScript，而是使用CSS和HTML來生成。
- HTML&CSS：圖標、字體、按鍵、麪包屑導航、表單、下拉、滑動開關、選擇、滾動條、切換按鈕
- JS：沒有JavaScripts，只有單純的CSS
Pure是一個相當小的框架，壓縮及最小化後僅有5.7KB。它沒有使用任何JavaScript，只是HTML和CSS。該CSS框架爲響應式佈局，採用模塊化結構，每個模塊的樣式可以單獨使用。
- HTML&CSS：網格、排版、表單、按鍵、表格、菜單
- JS：沒有JavaScripts，只有單純的CSS
- 其他：程序皮膚製作工具（Skin Builder）、YU 庫。
結論
根據你的需要，選擇可以與設計相匹配的框架。我們不應該根據框架來構建網站，因爲它會很大程度上限制設計者的思維。
如果前端設計/佈局不是那麼重要，那麼我們可以選擇使用某一框架。