你可能用不到很多大型 UI 框架中的大部分功能,如BootStrap,特別是當(dāng)你在開發(fā)小型、簡單的項(xiàng)目的時(shí)候,你需要的只是盡快的啟動(dòng)并能運(yùn)行它。幸運(yùn)的是,有很多更小型的 CSS 框架,你可以用來做替代品。
使用一個(gè)小型的 CSS 框架對開發(fā)者來說是更溫和的學(xué)習(xí)曲線,對于JavaScript功能沒有依賴,對用戶來說是更快的加載速度。
我這里為大家提供了一個(gè)小型、簡約的CSS框架列表,它們大部分都在5KB(壓縮后)以內(nèi),并且包含了構(gòu)建響應(yīng)式網(wǎng)頁設(shè)計(jì)的要素。
1. Min
Min,是這個(gè)列表中最小的 CSS 框架,具有響應(yīng)式的 12 列柵格系統(tǒng)、按鈕樣式、表格樣式、兼容Android的圖標(biāo)等等。Min 甚至支持像 IE 5.5 這樣古老的瀏覽器。
2. Milligram
Milligram 提供了現(xiàn)代化的UI–它的柵格系統(tǒng)采用 Flexbox,大小和長度才有 rem 單位,并且是移動(dòng)優(yōu)先的。但這也是有代價(jià)的,它只支持最新的Chrome、Firefox、IE、Safari和Opera等瀏覽器。
3. Blaze CSS
Blaze CSS 自身已經(jīng)是一個(gè)輕量級的框架了,但你還是可以精簡它的體積,因?yàn)樗哪K化的構(gòu)架,它允許你只包含你在項(xiàng)目中需要使用的部分以縮減文件大小。(點(diǎn)擊此處獲取更多精簡該框架的信息。)
4. Kube
Kube 包含了一個(gè)體積小于 6KB 的 CSS 框架,它具有響應(yīng)式的柵格系統(tǒng)、用于創(chuàng)建表單的類集合、多種表格類、顯示重要信息的通知類等等。
5. Pure
Pure 是雅虎的一個(gè)開源項(xiàng)目,是一套可以幫你快速構(gòu)建響應(yīng)式設(shè)計(jì)的 CSS 模塊,Pure 為所有的 HTML 元素都設(shè)置了基本樣式,基本模塊有:柵格系統(tǒng)、WEB表單、按鈕、表格、導(dǎo)航菜單等。
6. Furtive
自稱為“CSS微框架”的 Furtive 面向現(xiàn)代網(wǎng)頁設(shè)計(jì),同 Milligram ,F(xiàn)urtive 也是移動(dòng)優(yōu)先、基于FlexBox 的柵格系統(tǒng)、使用 rem 作為長度和大小單位。它的基本內(nèi)容包括:按鈕、表單、甚至還包括默認(rèn)顏色。
7. Skeleton
雖然有一年多時(shí)間沒更新了,Skeleton 仍然是構(gòu)建現(xiàn)代化的、響應(yīng)式WEB設(shè)計(jì)的一流框架。它配備了一個(gè)響應(yīng)式的柵格系統(tǒng)和默認(rèn)的HTML元素樣式。
8. FOX CSS
FOX CSS 是一個(gè)輕量級、模塊化的 CSS 框架,采用移動(dòng)優(yōu)先的設(shè)計(jì)方式,甚至支持 IE9。
9. Basscss
Basscss 由 22 個(gè)模塊組成: CSS reset、柵格系統(tǒng)、顏色類、構(gòu)建響應(yīng)式的實(shí)用類等等。Basscss 最大的特點(diǎn)是它的文件大小還不到 4KB。
10. Siimple
Siimple 是一個(gè)簡約的構(gòu)建響應(yīng)式、干凈的 WEB 設(shè)計(jì)框架。類似于 Skeleton,它具有 12 列的柵格系統(tǒng),字體、表格、按鈕、表單等的基本樣式。
11. Lotus
Lotus 是最小的 CSS 框架之一。它的主要特點(diǎn)有:響應(yīng)式的柵格系統(tǒng)、字體、按鈕、WEB表單等。
12. Picnic CSS
Picnic CSS 是一個(gè)使用 SASS 編寫的輕量級 UI 框架,使得你更加容易編輯和定制變量:如顏色和長度。它也有一些響應(yīng)式的、純CSS的組件,如模態(tài)窗口、內(nèi)容滑塊等。
總結(jié)
下表是關(guān)于列表中幾個(gè) CSS 框架主要特點(diǎn)的總結(jié):
| Name | Size* | Docs | License | GitHub Repo | Popularity ** |
|---|---|---|---|---|---|
| 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 |
via:sixrevisions.com,本文由 Specs 翻譯整理,發(fā)布在 WEB資源網(wǎng)。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無需額外費(fèi)用,即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。
