在幾年前，並沒有真正意義上的前端開發。隨著網絡技術的發展，網站和 Web 應用程序變得越來越復雜，前端部分的工作獨立出來逐漸成為現在的前端開發。如今，我們可以看到越來越多的公司在招聘前端開發崗位。
前端開發並不容易，除了掌握基本的 Html、CSS 和 Javascript 之外，因為不同版本的浏覽器和平台，你需要知道如何做一個跨浏覽器的網站。而最新的發展趨勢——響應式設計，它不僅使 Web 項目開發更難，也需要花費更多的開發時間。
不過，有很多優秀的框架可以幫助到你，這篇文章挑選了14個響應式的前端框架，列出了每個框架的 UI 組件和 Javascript 插件，幾乎所有的都使用了響應式網格系統。就個人而言，我比較喜歡 Twitter Boostrap，你最喜歡這裡面的哪個呢？
這些前端框架能為您提供以下好處：
- 跨浏覽器：前端框架都在不同的浏覽器測試通過。
- 一致性： UI 組件，如導航，按鈕，標簽，表單，下拉菜單，表格... 他們的風格都相互統一。
- 快速開發：您可以輕松，快速的構建一個布局。他們通常有代碼片段和優秀的文檔。
- 響應式：所有 CSS 組件和 Javascript 插件能夠從桌面擴展到移動端。
InK
Ink 是一個用於快速開發 Web 界面的 UI 套件，簡單易用和。它通過整合 Html，CSS 和 JavaScript 來提供現代化的解決方案，構建布局，顯示通用的界面元素，為你的用戶實現內容為中心的和用戶友好的互動功能。
- Html & CSS 組件：布局，導航，排版，圖標，表格，提醒，表單。
- JavaScript 組件：畫廊，模態窗口，表格，可排序的日期選擇器，選項卡，表單驗證，行為（停靠，折疊，關閉）。
- 其它特性：支持Sass 混入。
GroundworkCSS
GroundworkCSS 靈活的網格系統使你能夠快速開發，並能夠適應任何屏幕尺寸，從手持設備到大尺寸的顯示屏。GroundworkCSS 構建在強大的 CSS 預處理器 Sass 的基礎上。Sass是對 CSS3 的擴展，並添加了嵌套規則，變量，混入，選擇器繼承等等眾多特性。使用命令行工具或 Web 框架插件可以轉換為標准的 CSS 代碼。
- Html & CSS 組件：網格，布局，排版，按鈕，瓷磚，表格，表格，圖示，社會的圖標，響應文本，消息，警報。
- JavaScript組件：導航，標簽，工具提示。
- 其它特性：支持 Sass 混入。
Ivory
靈活，強大的響應式 Web 框架，使 Web 開發更快，更容易。支持 1200 像素到 320px 區間的響應式布局。
- Html & CSS 組件：網格，排版，表單，按鈕，提醒，分頁，面包屑，列表，表格。
- JavaScript組件：工具提示，選項卡，切換開關，手風琴。
Foundation
Foundation 是由加利福尼亞州的產品設計公司 Zurb 推出的。這是目前最先進的響應式前端框架，它有很多的模板布局，UI 組件的 CSS 樣式，也收錄了很多他們自己的 JavaScript 插件。
- Html & CSS 組件：網格布局模板，圖標，字體，響應式表格，SVG 社交圖標，分頁，面包屑，邊欄導航，按鈕，字體，標簽，提醒，面板，價格表，進度條，表格，縮略圖。
- JavaScript 組件：下拉按鈕，分割按鈕，開關，自適應視頻，燈箱，下拉列表，導航，顯示模態窗口，選項卡，工具提示。
- 其他特性：自定義皮膚的表單，SCSS 混入。
Grumby
Gumby 2 基於強大的 Sass 構建，Sass是一個功能強大的 CSS 預處理器，這使我們能夠快速的開發自己的 Gumby，並為您提供新的工具，讓你能夠在 Gumby 的框架基礎上快速定制。
- Html & CSS 組件：網格，表單，按鈕，導航，標簽，Entypo 圖標。
- JavaScript 組件：切換開關，下拉框，選項卡，模態窗口。
- 其他特性：自定義皮膚的表單，SASS & Compass。
Html KickStart
超精益的 Html5，CSS & JS 模塊，用於快速網站制作。它有一個全面的 UI 組件，也有一些有用的 JavaScript 插件，它的目標是成為設計師的朋友。
- Html & CSS 組件：網格，排版，按鈕，按鈕條，列表，表格，圖標，面包屑，圖像，表格。
- JavaScript：菜單，工具提示，語法高亮，選項卡，幻燈片，表單驗證。
- 其他特性：額外的 CSS 工具。
Maxmertkit
這個框架是由 Vetrenko Maxim Sergeevich 創建的，使程序員的生活更輕松。Maxmerkit 是基於部件修改器編碼風格的一個 CSS 框架。
- Html & CSS 組件：網格布局，typograpghy，徽章，按鈕，插入符，表格，圖標，標簽，菜單，進度表，下拉菜單，工具提示。
- JavaScript 組件：按鈕，轉盤，模態窗口，通知，彈出層，選項卡，滾動偵測。
- 其他特性：支持 Sass, Coffee Script。
Twitter Bootstrap
Bootstrap 是基於 Html，CSS 和 JavaScript 的簡潔靈活的流行前端框架及交互組件集，由微博的先驅 Twitter 在2011年8月開源的整套前端解決解決方案。Bootstrap有非常完備和詳盡的開發文檔，Web 開發人員能夠輕松搭建出清爽風格的界面以及實現良好的交互效果。
- Html & CSS 組件： 網格，布局，排版，代碼，表格，表單，按鈕，圖像，圖標，按鈕組，導航，面包屑，分頁，選項卡，徽章，縮略圖，提醒，進度條。
- JavaScript 組件： 過渡，模態窗口，下拉框，滾動檢測，標簽，工具提示，彈出層，警報，按鈕，手風琴，旋轉木馬，自動補齊。
- 其它特性： 支持定制， LESS CSS。
Skeleton
Skeleton 是一個小集合的 CSS 文件，可以幫助你迅速開發任何尺寸，外觀漂亮的網站，例如用於 17 寸筆記本電腦屏幕或 iPhone 屏幕的。Skeleton 建立在三個核心原則之上：兼容移動端的響應式網格，快速入門，風格無關。Skeleton 對於大多數開發者是一個相當不錯的選擇，因為它是輕量級的且易於使用。
- Html & CSS 組件： 網格，排版，按鈕，表單，媒體查詢。
Kube
Kube 是由 imperavi （他也是著名的 Redactor 編輯器的作者）發布的前端框架，以使設計者/開發者的生活更輕松。簡約而不簡單，適應性和響應式能夠使用各種需求。革命性的靈活網格和漂亮的印刷字體，沒有任何強加的樣式。
- Html & CSS 組件：排版，表單，網格，表格，按鈕，導航，圖標。
- JavaScript 組件： 按鈕，標簽。
- 其它特性：支持 LESS CSS。
Helium
Helium 是一種前端響應式 Web 開發框架，用於 Html5 和 CSS3 項目的快速原型設計和實際開發。它在許多方面與 Twitter Bootstrap 和 ZURB Foundation 相似。然而，不同於這兩個框架的是，Helium 的目的是要更輕量，更容易更改。把它看成是一個典型的汽車，在那裡你可以打開引擎蓋，容易對發動機進行改裝。
- Html & CSS 組件： 網格，按鈕，排版，表格。
- JavaScript 組件： 下拉框，表單驗證，模態窗口。
- 其它特性： 支持SASS & Compass。
Markup
Markup 框架是一個布局，窗口小部件，排版樣式和其他的 UI 組件的集合，可以根據自己的需要進行整合。
- Html & CSS 組件：布局，網格，排版，表格，按鈕，標題，面包屑，消息，導航列表，導航菜單。
- JavaScript 組件： 無 Javascript，純 CSS。
Topcoat
Topcoat 是一個 CSS 集合，用於簡潔和快速的 Web 應用程序開發。它是一個開源庫，不需要任何 JavaScript 內置的用戶界面元素。
- Html & CSS 組件： 圖標，字體，按鈕，面包屑，按鈕欄，表格，下拉列表，滑動開關，標簽，切換按鈕，選擇，滑塊
- JavaScript 組件： 無 Javascript ，純 CSS
PureCSS
Pure 是一組輕量的，響應式的 CSS 模塊，您可以使用在任何的 Web 項目中。充分考慮了移動設備中的使用，保持文件體積盡量小，每行 CSS 都進行了仔細的考慮。Pure 基於 Normalize.CSS 構建，並提供布局以及 原生 Html 元素的風格，加上最常見的 UI 組件。相信這些都是你需要的。
- Html & CSS 組件： 網格，排版，表格，按鈕，表格，菜單。
- JavaScript 組件： 無 Javascript ，純 CSS。
- 其它特性： 皮膚制作器，YU 庫。
總結
我必須要說的是，根據項目的不同要求，大部分的時間你都需要對使用的框架進行調整以符合您的設計。我們不應該完全使用框架來建立一個網站，因為這將極大地限制設計師的潛力。
如果前端的設計或布局並不重要，我們可以使用該框架。例如在網站後台管理系統的使用 Twitter Bootstrap，它可以幫助你節省60%的開發時間。
有時候，你可能只需要使用框架中的一部分，例如網格系統，那麼別的不需要的就可以刪除。總而言之，沒有完美的前端框架，要根據項目的需求和實際使用場景靈活變通，讓框架成為你的助手而不是障礙。