如何使用CSS框架來加速設計流程？

現在的網站風格已經與它們很早之前的樣子有了很大的不同。如果現在再回過頭去看有些公司最初的網站UI，我想大多數網路使用者都很難認得出來。所以也多虧了網頁設計技術的創新，現在網站不僅僅是只能顯示訊息，它們同樣也可以擁有有趣的動畫、多樣的佈局和互動的元素。而其中，這些大部分都是由CSS來實現的。

所以CSS的出現為原本平平無奇的網頁注入了活力。這也是網站的使用者體驗進一步進化的原因。這可能是現在幾乎所有的網站或多或少都在使用CSS的原因之一。

今年，一些CSS技術正在掀起一場新的技術革新，例如：Flexbox，儘管在Google Chrome上83%的頁面加載使用了Flexbox，但另一個名為Grid的新競爭對手也正在慢慢流行起來。另外還有 CSS Writing-Mode、行動動畫、單頁網站、彈性字體和滾動捕捉等技術也可能產生一定影響。

但在本文裡，不會討論不同CSS技術之間的異同，主要是以介紹CSS框架為主。因為過去的幾年裡它們才開始流行起來，但已經有越來越多的開發人員已經開始接觸使用它們了。

CSS框架是什麼？

 

我們將CSS定義為設計語言，它為HTML文件的UI設計提供了幫助。透過CSS進行設計有很多優勢，它可以與任何類型的XML一起使用，也包括XUL和SVG。 CSS框架就像是一個現成的包，其中包含可以作為網站結構基礎的文件。

使用框架有很多好處。以下是其中一些：

• 節省時間：這是最突出的優點之一。使用CSS框架，開發人員在建立應用程式或網站時無需從零開始。他們可以空出學習的時間專注到其他重要工作上，例如UI設計，行動端化以及解決特定瀏覽器相容問題。
• 程式碼可重複使用：如果你的專案是一個擁有很多頁面的大型項目，並且後續仍在持續更新，那麼框架的使用將對你將很有用的。可以說擁有強大重用特性的框架，能明顯縮短您專案的準備週期。
• 跨瀏覽器的問題：長久以來，處理各瀏覽器間的存取差異，是廣大前端開發者最為頭痛的事情。但CSS框架能提前為您發現並解決各瀏覽器間的差異，以確保您可以在任何瀏覽器中無差異的運作。
• 標準結構確保一致性：前端框架通常由CSS，HTML和JavaScript檔案組成，這些檔案有助於確保所有頁面中元素（如設計和表單等）的一致性。

優秀的CSS框架 

Bootstrap

Bootstrap最初是Twitter Blueprint作為團隊內部使用的工具而創建的。但在它公開發布後，它受到了開發者廣泛使用，使用率增長不斷增長。

Bootstrap為警告視窗、按鈕、輪播、下拉式選單、表單等元素提供了設計範本。透過Bootstrap行動優先功能，可以為您輕鬆創建響應式佈局，它能為您的應用程式在多個裝置上實現一致的設計。

Skeleton

Skeleton以「簡單支援響應式樣板」的特色著稱。因為該框架只有大約400行程式碼，它更適合於較小的專案或開發人員有著輕量化要求的情況。

對於那些剛開始使用前端框架的人來說，這也是一個不錯的選擇。但因為Skeleton缺乏了CSS設計模板、預處理器和更多豐富性功能，這使得它不太適合更大的團隊和專案。

ZURB Foundation

如果您正在尋找的是一個快速且響應迅速的前端框架，那麼ZURB Foundation可能正是您想要的。它允許您為所有設備創建生產環境​​的程式碼和原型。依靠ZURB Foundation支援具有「準系統結構」的框架結構，可以讓使用者快速完成產品設計原型。同時它在GitHub上也有大量的支持，提交的數量超過了14,000個，貢獻者也在940個以上。目前華盛頓郵報和國家地理等網站均使用了ZURB Foundation框架。

UI Kit

UI Kit以具有高度可自訂的輕量級元素而聞名。基於使用它提供的模板，您將可以輕鬆創建各種Web介面。它的安裝包裡包含了CSS、HTML和JavaScript文件，以及用於Sublime Text和Atom編輯器的套件。另外，它還提供30多個可混合搭配的模組化組件，以實現更多功能。這意味著您不必重複搜尋標記和類別名稱。

UI Kit與Bootstrap和Foundation等其他框架的不同之處在於它沒有使用將頁面分為12列的網格設定。它將它的佈局分為三個元件，分別是Flex、Grid和With。不過由於相關的支援資源不多，所以這個框架比較適合有相當經驗的開發人員來使用。

Bulma

Bulma作為最常用的框架之一，已經得到了超過15萬名開發人員的支持。它是基於Flexbox的免費開源框架之一。 Bulma易於使用，即使是作為初學者，也是非常易於上手的，因為該框架僅保留了開發人員開發響應式網站的最低要求。同時，在支援方面，Bulma在GitHub上擁有一個龐大的用戶社區，可提供支援。

Materialize

這個前端CSS框架是根據Google的設計規格而建立的。它帶有易於使用的IZ列網格，在佈局方面具備良好的基礎。它的包裡還包括了按鈕，卡片，表格，圖標以及許多其他隨時可用的常用組件。

您也可以使用如：拖出式移動選單，漣漪動畫效果，SASS mixins等功能。另外，Materialize也是可以在任何類型的裝置上使用。

Semantic UI

儘管Semantic UI是作為較新的框架之一，但它在幾個方面的努力還是值得肯定的。首先，它在程式碼中使用了自然語言，這可能受到初學者開發人員的青睞。而且它的繼承系統中有一個高級主題變量，所以這使你在設計時擁有較高的自由度。

使用Semantic UI時，您不必使用其他函式庫，因為它附帶了大量的第三方函式庫。這使您的網頁開發過程更加方便。憑藉它出色的功能，可能很輕鬆地俘虜新舊開發人員。

Tailwind CSS

Tailwind CSS與其他CSS框架不同，因為它的套件中沒有預置任何的UI元件。該框架更注重的是實用性。它附帶的CSS類可以在您建立網站時需要設定顏色、大小、位置等內容時為您提供極大的幫助。 Tailwind是為那些希望在網頁設計方面擁有完全自由度的開發人員而設計的。

Picnic CSS

框架非常輕量，壓縮後程式碼尺寸不到10KB。 Picnic CSS也提供了基於Flexbox的網格佈局和許多UI元素，還包括了適合初學者使用的模態視窗和導航欄，您可以使用它們來啟動您的Web開發專案。

Ionic

這個開源的行動UI框架可用來為原生Android和iOS開發出高網路效能的應用程式。它帶有直覺的UI元件，有助於加快網站或應用程式的開發過程。

Ionic提供卓越的原生功能和速度，並能很好地與社群、主要分析、身份驗證、外掛程式和其他功能整合一起工作。

Pure.css

Pure.css專注於行動優先的概念。由於Pure.css是模組化的，您可以輕鬆地匯入您要使用的套件。您還可以存取大量可供下載和安裝的佈局。 Pure.css 以其輕量著稱。在壓縮後，這個框架的尺寸只有3.8KB。

mini.css

mini.css也是一款能夠提供完整功能且足夠輕量的框架，它壓縮後的大小約為10KB，雖然它是個很輕的框架，但它仍然提供大量佈局和UI的元素。如果您想了解它的工作原理是怎樣的，您可以透過它的文件了解。

Base

如果您的主要工作是為所有的應用程式和網路開發專案打下堅實的基礎，那麼您可以嘗試這個模組化框架。 Base自稱是 「堅如磐石」的響應性框架。 Base基於Normalize.css，並提供基本的、可自訂的樣式。如果你的需求只是一個簡單的框架，那麼它可以滿足你。

Concise CSS

如果你需要的是一個簡單且實用的框架，那麼Concise CSS可能會是你的選擇。它的框架是為那些想要「放棄臃腫」的開發人員準備的。顧名思義，它們為開發人員提供的是不包含其他額外附件的包，如果需要更多UI元素，您可以透過單獨的工具包完成新增。

Mobi.css

壓縮後的Mobi.css只有2.6KB，它是您能找到的最小的框架之一。它的執行速度是它的特點，特別是對於行動設備，所以如果你追求的是速度，那麼試試這個框架。

不過，和其他模組化框架一樣，如果您需要的不只是它們提供的基本樣式和功能，您可以在其基礎上以模組化方式進行構建。

總結

各類CSS框架除了為使用者提供了專案正常運作所需的基礎外，也確保了您的應用程式在各瀏覽器中存取的一致性和包含響應式的網站設計。這樣您就可以集中精力更好地去專注於應用程式的內容和策略的製定。那麼，希望您能從上面的清單中找到符合您需求的框架。

 原文出處：https://dzone.com/articles/how-to-speed-up-your-design-process-using-modern-c

#相關推薦：CSS影片教學

#

以上是如何使用CSS框架來加速設計流程？的詳細內容。更多資訊請關注PHP中文網其他相關文章！