CSS框架提供了設計一致解決方案的基本結構，以解決前端web開發中的常見問題。它們提供了通用功能，可以針對特定場景和應用程序進行覆蓋。這大大減少了開始創建應用程序和網站所需的時間。

[[438860]]

Bootstrap

最流行的前端框架之一，當然是Bootstrap。雖然它是為內部團隊開發的一種工具，但一旦發布，它的采用率就大大提高了。它為常見的UI組件(如按鈕、排版、表單、下拉列表、警報、選項卡、旋轉木馬)以及可選的JavaScript擴展提供設計模板。

您可以使用Bootstrap輕松創建響應性布局，Bootstrap 3通過其mobile first功能重點強調了這一點。通過引導在12列網格系統中組織元素的能力提供了跨設備的干凈、一致的設計。Bootstrap使用的樣式表較少，但也被移植到了Sass(作為一個單獨的存儲庫進行維護)，因此兩者的用戶都可以訪問內容。

Foundation

Foundation是一個響應前端框架，用于創建跨多個設備工作的站點的快速原型和生產代碼。Foundation是基于940px網格系統，而引導是基于1170px網格布局。

使用Foundation的優點之一是能夠快速地原型原型，因為框架的裸骨結構和提供的啟動模板，對于快速原型設計非常有用。

Skeleton

Skeleton是一個“簡單、快速響應的樣板文件”。Skeleton非常適合較小的項目，或者如果輕量級是優先考慮的話(它只有大約400行未壓縮的代碼)。樣式的設計更多的是作為一個起點，而不是作為一個UI框架。Skeleton由于其輕巧的特性，非常適合以移動為中心的設計。

對于初學者來說，Skeleton也是前端框架的一個很好的起點。它有簡潔的代碼和簡單的布局。

UI工具包

UI工具包元素易于定制和輕量級。它提供了快速構建web界面的模板。除了包含所有HTML、CSS和JavaScript文件的安裝包之外，它還包含一個用于Sublime文本和Atom編輯器的自動完成包，這樣用戶就不必一次又一次地查找UI工具包類名和標記。

基礎系統、引導程序和UI工具包之間的關鍵區別是網格系統。UI工具包不使用12列網格設置，而是將布局分解為三個組件，即網格、柔性和寬度。使用網格組件，可以根據需要創建任意數量的列。

除此之外，您可以為您的項目嘗試的其他框架包括：

• TukTuk-響應靈敏，重量輕;面向對象的CSS;用咖啡腳本寫的。
• 語義用戶界面-使用自然語言原則使代碼更具可讀性;較少的預處理器;響應速度快，調試簡單。
• YAML-非常纖細的框架核心(5.9KB);Sass預處理器;防彈模塊;適用于IE6+。
• 960網格系統-流體和響應性;12柱或16柱網格選項可用;適用于快速成型以及生產環境。

雖然前端框架現在在個人和專業項目中都得到了廣泛的應用，但一些反對使用框架的觀點仍然存在。它們圍繞著編寫自己的設計網格而不是使用響應框架，增加了加載時間，所有網站看起來都一樣，以及框架帶來的不必要的膨脹。

如前所述，它因案例和項目而異。如果它適合你的項目，沒有必要三思而后行。框架有足夠的好處來保證它們的使用。在為項目選擇正確的框架時，請考慮其中的一些要點。它是否有足夠的支持和更新來跟上?它是否適合您的項目規模和未來可能的擴展?