在幾年前，並沒有真正意義上的前端開發。隨著網路技術的發展，網站和 Web 應用程式變得越來越複雜，前端部分的工作獨立出來逐漸成為現在的前端開發。如今，我們可以看到越來越多的公司在招聘前端開發崗位。

　　前端開發並不容易，除了掌握基本的 HTML、CSS 和 Javascript 之外，因為不同版本的瀏覽器和平臺，你需要知道如何做一個跨瀏覽器的網站。而最新的發展趨勢——響應式設計，它不僅使 Web 專案開發更難，也需要花費更多的開發時間。

　　不過，有很多優秀的框架可以幫助到你，這篇文章挑選了14個響應式的前端框架，列出了每個框架的 UI 元件和 Javascript 外掛，幾乎所有的都使用了響應式網格系統。就個人而言，我比較喜歡

　　這些前端框架能為您提供以下好處：

• 跨瀏覽器：前端框架都在不同的瀏覽器測試通過。
• 一致性： UI 元件，如導航，按鈕，標籤，表單，下拉選單，表格... 他們的風格都相互統一。
• 快速開發：您可以輕鬆，快速的構建一個佈局。他們通常有程式碼片段和優秀的文件。
• 響應式：所有 CSS 元件和 Javascript 外掛能夠從桌面擴充套件到移動端。

InK

　　Ink 是一個用於快速開發 Web 介面的 UI 套件，簡單易用和。它通過整合 HTML，CSS 和 JavaScript 來提供現代化的解決方案，構建佈局，顯示通用的介面元素，為你的使用者實現內容為中心的和使用者友好的互動功能。

• HTML & CSS 元件：佈局，導航，排版，圖示，表格，提醒，表單。
• JavaScript 元件：畫廊，模態視窗，表格，可排序的日期選擇器，選項卡，表單驗證，行為（停靠，摺疊，關閉）。
• 其它特性：支援Sass 混入。

　　GroundworkCSS 靈活的網格系統使你能夠快速開發，並能夠適應任何螢幕尺寸，從手持裝置到大尺寸的顯示屏。GroundworkCSS 構建在強大的 CSS 前處理器 Sass 的基礎上。Sass 是對 CSS3 的擴充套件，並添加了巢狀規則，變數，混入，選擇器繼承等等眾多特性。使用命令列工具或 Web 框架外掛可以轉換為標準的 CSS 程式碼。

• HTML & CSS 元件：網格，佈局，排版，按鈕，瓷磚，表格，表格，圖示，社會的圖示，響應文字，訊息，警報。
• JavaScript 元件：導航，標籤，工具提示。
• 其它特性：支援 Sass 混入。

Ivory

　　靈活，強大的響應式 Web 框架，使 Web 開發更快，更容易。支援 1200 畫素到 320px 區間的響應式佈局。

• HTML & CSS 元件：網格，排版，表單，按鈕，提醒，分頁，麵包屑，列表，表格。
• JavaScript 元件：工具提示，選項卡，切換開關，手風琴。

　　Foundation 是由加利福尼亞州的產品設計公司 Zurb 推出的。這是目前最先進的響應式前端框架，它有很多的模板佈局，UI 元件的 CSS 樣式，也收錄了很多他們自己的 JavaScript 外掛。

• HTML & CSS 元件：網格佈局模板，圖示，字型，響應式表格，SVG 社交圖示，分頁，麵包屑，邊欄導航，按鈕，字型，標籤，提醒，面板，價格表，進度條，表格，縮圖。
• JavaScript 元件：下拉按鈕，分割按鈕，開關，自適應視訊，燈箱，下拉列表，導航，顯示模態視窗，選項卡，工具提示。
• 其他特性：自定義面板的表單，SCSS 混入。

　　Gumby 2 基於強大的 Sass 構建，Sass 是一個功能強大的 CSS 前處理器，這使我們能夠快速的開發自己的 Gumby，併為您提供新的工具，讓你能夠在 Gumby 的框架基礎上快速定製。

• HTML & CSS 元件：網格，表單，按鈕，導航，標籤，Entypo 圖示。
• JavaScript 元件：切換開關，下拉框，選項卡，模態視窗。
• 其他特性：自定義面板的表單，SASS & Compass。

　　超精益的 HTML5，CSS & JS 模組，用於快速網站製作。它有一個全面的 UI 元件，也有一些有用的 JavaScript 外掛，它的目標是成為設計師的朋友。

• HTML & CSS 元件：網格，排版，按鈕，按鈕條，列表，表格，圖示，麵包屑，影象，表格。
• JavaScript：選單，工具提示，語法高亮，選項卡，幻燈片，表單驗證。
• 其他特性：額外的 CSS 工具。

　　這個框架是由 Vetrenko Maxim Sergeevich 建立的，使程式設計師的生活更輕鬆。Maxmerkit 是基於部件修改器編碼風格的一個 CSS 框架。

• HTML & CSS 元件：網格佈局，typograpghy，徽章，按鈕，插入符，表格，圖示，標籤，選單，進度表，下拉選單，工具提示。
• JavaScript 元件：按鈕，轉盤，模態視窗，通知，彈出層，選項卡，滾動偵測。
• 其他特性：支援 Sass, Coffee Script。

　　Bootstrap 是基於 HTML，CSS 和 JavaScript 的簡潔靈活的流行前端框架及互動元件集，由微博的先驅 Twitter 在2011年8月開源的整套前端解決解決方案。Bootstrap 有非常完備和詳盡的開發文件，Web 開發人員能夠輕鬆搭建出清爽風格的介面以及實現良好的互動效果。

• HTML & CSS 元件： 網格，佈局，排版，程式碼，表格，表單，按鈕，影象，圖示，按鈕組，導航，麵包屑，分頁，選項卡，徽章，縮圖，提醒，進度條。
• JavaScript 元件： 過渡，模態視窗，下拉框，滾動檢測，標籤，工具提示，彈出層，警報，按鈕，手風琴，旋轉木馬，自動補齊。
• 其它特性： 支援定製， LESS CSS。

　　Skeleton 是一個小集合的 CSS 檔案，可以幫助你迅速開發任何尺寸，外觀漂亮的網站，例如用於 17 寸膝上型電腦螢幕或 iPhone 螢幕的。Skeleton 建立在三個核心原則之上：相容移動端的響應式網格，快速入門，風格無關。Skeleton 對於大多數開發者是一個相當不錯的選擇，因為它是輕量級的且易於使用。

• HTML & CSS 元件： 網格，排版，按鈕，表單，媒體查詢。

Kube

　　Kube 是由 imperavi （他也是著名的 Redactor 編輯器的作者）釋出的前端框架，以使設計者/開發者的生活更輕鬆。簡約而不簡單，適應性和響應式能夠使用各種需求。革命性的靈活網格和漂亮的印刷字型，沒有任何強加的樣式。

• HTML & CSS 元件：排版，表單，網格，表格，按鈕，導航，圖示。
• JavaScript 元件： 按鈕，標籤。
• 其它特性：支援 LESS CSS。

　　Helium 是一種前端響應式 Web 開發框架，用於 HTML5 和 CSS3 專案的快速原型設計和實際開發。它在許多方面與 Twitter Bootstrap 和 ZURB Foundation 相似。然而，不同於這兩個框架的是，Helium 的目的是要更輕量，更容易更改。把它看成是一個典型的汽車，在那裡你可以開啟引擎蓋，容易對發動機進行改裝。

• HTML & CSS 元件： 網格，按鈕，排版，表格。
• JavaScript 元件： 下拉框，表單驗證，模態視窗。
• 其它特性： 支援 SASS & Compass。

　　Markup 框架是一個佈局，視窗小部件，排版樣式和其他的 UI 元件的集合，可以根據自己的需要進行整合。

• HTML & CSS 元件：佈局，網格，排版，表格，按鈕，標題，麵包屑，訊息，導航列表，導航選單。
• JavaScript 元件： 無 Javascript，純 CSS。

　　Topcoat 是一個 CSS 集合，用於簡潔和快速的 Web 應用程式開發。它是一個開源庫，不需要任何 JavaScript 內建的使用者介面元素。

• HTML & CSS 元件： 圖示，字型，按鈕，麵包屑，按鈕欄，表格，下拉列表，滑動開關，標籤，切換按鈕，選擇，滑塊
• JavaScript 元件： 無 Javascript ，純 CSS

　　Pure 是一組輕量的，響應式的 CSS 模組，您可以使用在任何的 Web 專案中。充分考慮了移動裝置中的使用，保持檔案體積儘量小，每行 CSS 都進行了仔細的考慮。Pure 基於 Normalize.css 構建，並提供佈局以及 原生 HTML 元素的風格，加上最常見的 UI 元件。相信這些都是你需要的。

• HTML & CSS 元件： 網格，排版，表格，按鈕，表格，選單。
• JavaScript 元件： 無 Javascript ，純 CSS。
• 其它特性： 面板製作器，YU 庫。

總結

　　我必須要說的是，根據專案的不同要求，大部分的時間你都需要對使用的框架進行調整以符合您的設計。我們不應該完全使用框架來建立一個網站，因為這將極大地限制設計師的潛力。

　　如果前端的設計或佈局並不重要，我們可以使用該框架。例如在網站後臺管理系統的使用 Twitter Bootstrap，它可以幫助你節省60%的開發時間。

　　有時候，你可能只需要使用框架中的一部分，例如網格系統，那麼別的不需要的就可以刪除。總而言之，沒有完美的前端框架，要根據專案的需求和實際使用場景靈活變通，讓框架成為你的助手而不是障礙。

　　如果您覺得這篇文章對您有用，記得輕輕點選一下右下角的【推薦】哦：）

您可能感興趣的相關文章