CSS框架提供了設(shè)計(jì)一致解決方案的基本結(jié)構(gòu)，以解決前端web開(kāi)發(fā)中的常見(jiàn)問(wèn)題。它們提供了通用功能，可以針對(duì)特定場(chǎng)景和應(yīng)用程序進(jìn)行覆蓋。這大大減少了開(kāi)始創(chuàng)建應(yīng)用程序和網(wǎng)站所需的時(shí)間。

[[438860]]

Bootstrap

最流行的前端框架之一，當(dāng)然是Bootstrap。雖然它是為內(nèi)部團(tuán)隊(duì)開(kāi)發(fā)的一種工具，但一旦發(fā)布，它的采用率就大大提高了。它為常見(jiàn)的UI組件(如按鈕、排版、表單、下拉列表、警報(bào)、選項(xiàng)卡、旋轉(zhuǎn)木馬)以及可選的JavaScript擴(kuò)展提供設(shè)計(jì)模板。

您可以使用Bootstrap輕松創(chuàng)建響應(yīng)性布局，Bootstrap 3通過(guò)其mobile first功能重點(diǎn)強(qiáng)調(diào)了這一點(diǎn)。通過(guò)引導(dǎo)在12列網(wǎng)格系統(tǒng)中組織元素的能力提供了跨設(shè)備的干凈、一致的設(shè)計(jì)。Bootstrap使用的樣式表較少，但也被移植到了Sass(作為一個(gè)單獨(dú)的存儲(chǔ)庫(kù)進(jìn)行維護(hù))，因此兩者的用戶都可以訪問(wèn)內(nèi)容。

Foundation

Foundation是一個(gè)響應(yīng)前端框架，用于創(chuàng)建跨多個(gè)設(shè)備工作的站點(diǎn)的快速原型和生產(chǎn)代碼。Foundation是基于940px網(wǎng)格系統(tǒng)，而引導(dǎo)是基于1170px網(wǎng)格布局。

使用Foundation的優(yōu)點(diǎn)之一是能夠快速地原型原型，因?yàn)榭蚣艿穆愎墙Y(jié)構(gòu)和提供的啟動(dòng)模板，對(duì)于快速原型設(shè)計(jì)非常有用。

Skeleton

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

對(duì)于初學(xué)者來(lái)說(shuō)，Skeleton也是前端框架的一個(gè)很好的起點(diǎn)。它有簡(jiǎn)潔的代碼和簡(jiǎn)單的布局。

UI工具包

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

基礎(chǔ)系統(tǒng)、引導(dǎo)程序和UI工具包之間的關(guān)鍵區(qū)別是網(wǎng)格系統(tǒng)。UI工具包不使用12列網(wǎng)格設(shè)置，而是將布局分解為三個(gè)組件，即網(wǎng)格、柔性和寬度。使用網(wǎng)格組件，可以根據(jù)需要?jiǎng)?chuàng)建任意數(shù)量的列。

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

• TukTuk-響應(yīng)靈敏，重量輕;面向?qū)ο蟮腃SS;用咖啡腳本寫(xiě)的。
• 語(yǔ)義用戶界面-使用自然語(yǔ)言原則使代碼更具可讀性;較少的預(yù)處理器;響應(yīng)速度快，調(diào)試簡(jiǎn)單。
• YAML-非常纖細(xì)的框架核心(5.9KB);Sass預(yù)處理器;防彈模塊;適用于IE6+。
• 960網(wǎng)格系統(tǒng)-流體和響應(yīng)性;12柱或16柱網(wǎng)格選項(xiàng)可用;適用于快速成型以及生產(chǎn)環(huán)境。

雖然前端框架現(xiàn)在在個(gè)人和專業(yè)項(xiàng)目中都得到了廣泛的應(yīng)用，但一些反對(duì)使用框架的觀點(diǎn)仍然存在。它們圍繞著編寫(xiě)自己的設(shè)計(jì)網(wǎng)格而不是使用響應(yīng)框架，增加了加載時(shí)間，所有網(wǎng)站看起來(lái)都一樣，以及框架帶來(lái)的不必要的膨脹。

如前所述，它因案例和項(xiàng)目而異。如果它適合你的項(xiàng)目，沒(méi)有必要三思而后行。框架有足夠的好處來(lái)保證它們的使用。在為項(xiàng)目選擇正確的框架時(shí)，請(qǐng)考慮其中的一些要點(diǎn)。它是否有足夠的支持和更新來(lái)跟上?它是否適合您的項(xiàng)目規(guī)模和未來(lái)可能的擴(kuò)展?