網頁設計的12個輕量CSS框架

By Jacob Gubecss

你或許不須要用到Bootstrap這種大型UI框架的大部分功能,尤爲當你想開發簡單直接的項目,並指望越快跑起來越好。幸運的是,有小而快的CSS框架供你選擇。html

使用一個小的CSS框架通常意味着更平緩的學習曲線,不依賴JavaScript功能,和更快的加載時間 。git

我製做了一個優秀的小型/最小化的CSS框架讓你是探索。它們大部分小於 5 KB(最小化和gzipped後)幷包含用於開發響應式頁面的核心工功能。github

min

min

min,列表中最小的CSS框架,包含響應式 12 列的柵格系統,按鈕樣式,表格樣式,兼容安卓系統的圖標等。min支持古老的瀏覽器好比 IE 5.5web

Milligram

Milligram

Miligram爲的是現代UIs - 使用了FlexBox做爲柵格系統,用rem做爲長度和大小的單位,而且移動優先。在這個極端上的代價是:Miligram只支持最新的Chrome,Firefox,IE,Safari和Opera。瀏覽器

Blaze CSS

Blaze CSS

Blaze css在輕量化上面已經很是出衆,可是你還能夠更進一步的優化。因爲模塊化的設計是的用戶能夠只引入須要的模塊。(參考 instructions for creating a custom Blaze CSS build 瞭解更多)框架

Kube

Kube

Kube在小於6KB的CSS框架中出了一記重拳。他擁有一個響應式柵格系統,一套健壯的網頁表單類,通知類用於展現重要信息,等等。模塊化

Pure

Pure

Pure,Yahoo!開發者發起的開源項目,是一套幫助開發響應式頁面的CSS模塊。Pure幫助你快速創建響應式設計。對全部元素有幾本的樣式(在Normalize.css上創建起來),以及對應於柵格佈局,網頁表單,按鈕和表格的模塊,以及 導航菜單.工具

Furtive

Furtive

自稱「CSS微框架」,Furtive專門針對現代web設計。像Miligram,Furtive移動優先,有一個響應式的基於FlexBox的網格,是用rem單位做爲長度的大小。並對錶單,按鈕,基礎顏色等有涵蓋。佈局

Skeleton

Skeleton

雖然超過一年都沒有被更新, Skeleton任然是構建現代響應式設計的一流框架。包含一個直觀的柵格系統和基本類型。

FOX CSS

FOX CSS

FOX CSS是一個輕量化,模塊化的CSS框架。使用了移動優先的設計原則,支持最先到 IE 9,以及一個non-aggressive的 CSS reset (受 KNACSS 啓發).

Basscss

Basscss

Basscss有超過22個css模塊組成,包括CSS reset,柵格系統,顏色類,工具類,幫助你構建響應式設計,更可貴的是,Basscss功能出奇的豐富,畢竟它不到 4 KB。

Siimple

Siimple

Siimple是一個最小化的CSS框架,用於構建響應式的感受的網站設計。於Skeleton相似:它有一個直觀的12列網格系統和對佈局、表格、按鈕和表單等的基本樣式。

Lotus

Lotus

LotUs是最小的css框架之一。它覆蓋的重點有:響應式網格系統,排版,按鈕和表單。

Picnic CSS

Picnic CSS

Picnic CSS是一個輕量化的全段Sass框架,讓你能夠輕易的定製參數如顏色和長度。它還有一些讓人驚歎的純CSS組件如 Modal 彈窗和內容滑動器。

Summary Table

下面列表包含了上述CSS框架一些具體的參數。

名字 *大小 文檔 版權 GitHub倉庫 **熱門度
min 1.02 KB Docs MIT Repo 685**
Milligram 4.05 KB Docs MIT Repo 3,000**
BlazeCSS 5.71 KB Docs MIT Repo 7**
Kube 5.94 KB Docs MIT Repo (outdated) 538**
Pure 4.0 KB Docs BSD Repo 13,373**
Furtive 2.37 KB Docs MIT Repo 369**
Skeleton 1.57 KB Docs MIT Repo 10,884**
FOX CSS 2.46 KB Docs Unknown Repo 87**
Basscss 3.49 KB Docs MIT Repo 2,597**
Siimple 5.56 KB Docs MIT Repo 14**
Lotus 1.80 KB Docs MIT Repo 14**
Picnic CSS 2.32 KB Docs MIT Repo 932

*大小 是指 minified 和 gzipped 後的大小,這個值是從個人獨立測試環境中計算出來的。

**熱門度試着github上星的個數,指的是用戶關注代碼變化的數量。 個數越高越好.**

原創文章,轉載請註明:轉載自http://whohelpme.com/blog/main/admin.html

相關文章
相關標籤/搜索