By Jacob Gubecss
你或許不須要用到Bootstrap這種大型UI框架的大部分功能,尤爲當你想開發簡單直接的項目,並指望越快跑起來越好。幸運的是,有小而快的CSS框架供你選擇。html
使用一個小的CSS框架通常意味着更平緩的學習曲線,不依賴JavaScript功能,和更快的加載時間 。git
我製做了一個優秀的小型/最小化的CSS框架讓你是探索。它們大部分小於 5 KB(最小化和gzipped後)幷包含用於開發響應式頁面的核心工功能。github
min,列表中最小的CSS框架,包含響應式 12 列的柵格系統,按鈕樣式,表格樣式,兼容安卓系統的圖標等。min支持古老的瀏覽器好比 IE 5.5web
Miligram爲的是現代UIs - 使用了FlexBox做爲柵格系統,用rem
做爲長度和大小的單位,而且移動優先。在這個極端上的代價是:Miligram只支持最新的Chrome,Firefox,IE,Safari和Opera。瀏覽器
Blaze css在輕量化上面已經很是出衆,可是你還能夠更進一步的優化。因爲模塊化的設計是的用戶能夠只引入須要的模塊。(參考 instructions for creating a custom Blaze CSS build 瞭解更多)框架
Kube在小於6KB的CSS框架中出了一記重拳。他擁有一個響應式柵格系統,一套健壯的網頁表單類,通知類用於展現重要信息,等等。模塊化
Pure,Yahoo!開發者發起的開源項目,是一套幫助開發響應式頁面的CSS模塊。Pure幫助你快速創建響應式設計。對全部元素有幾本的樣式(在Normalize.css上創建起來),以及對應於柵格佈局,網頁表單,按鈕和表格的模塊,以及 導航菜單.工具
自稱「CSS微框架」,Furtive專門針對現代web設計。像Miligram,Furtive移動優先,有一個響應式的基於FlexBox的網格,是用rem
單位做爲長度的大小。並對錶單,按鈕,基礎顏色等有涵蓋。佈局
雖然超過一年都沒有被更新, Skeleton任然是構建現代響應式設計的一流框架。包含一個直觀的柵格系統和基本類型。
FOX CSS是一個輕量化,模塊化的CSS框架。使用了移動優先的設計原則,支持最先到 IE 9,以及一個non-aggressive的 CSS reset (受 KNACSS 啓發).
Basscss有超過22個css模塊組成,包括CSS reset,柵格系統,顏色類,工具類,幫助你構建響應式設計,更可貴的是,Basscss功能出奇的豐富,畢竟它不到 4 KB。
Siimple是一個最小化的CSS框架,用於構建響應式的感受的網站設計。於Skeleton相似:它有一個直觀的12列網格系統和對佈局、表格、按鈕和表單等的基本樣式。
LotUs是最小的css框架之一。它覆蓋的重點有:響應式網格系統,排版,按鈕和表單。
Picnic CSS是一個輕量化的全段Sass框架,讓你能夠輕易的定製參數如顏色和長度。它還有一些讓人驚歎的純CSS組件如 Modal 彈窗和內容滑動器。
下面列表包含了上述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