20-responsive-css-grid-systems-1

柵格系統這種東西和許多同類工具/素材一樣,“系統”二字讓它看起來無比高大上,而實際上大多數的柵格系統只是一系列縱橫交錯的細線構成。很簡單?看起來確實如此。不過它之所以被冠以“系統”二字,主要還是因為這些線條所涉及的內容管理方式、梳理頁面結構的功能。柵格系統的運用會促使你的網頁內容逐步走向規則化,實現一致性的設計。下面的20款CSS柵格可以更好地運用到網頁開發實踐中去,賦予你的網站以調理性。

1. ChewingGrid

chewing-grid1

ChewingGrid 是一款卡片列表風的CSS柵格,通??梢杂糜谝曨l、磁貼、文本等各種類型的網頁元素。在使用ChewingGrid的時候無需媒體查詢,你需要控制的是列的數量,最大和最小寬度。設定的時候可以直接使用默認的柵格,也可以自定義。

2. Motherplate

motherplate1

Mother plate 是一款基于HTML5、CSS3和SCSS的響應式模板,它不包含視覺組件,僅在CSS中幫你控制一切。

3. Lemonade

lemonade

Lemonade 是一款簡單靈活且易于定制的柵格系統,它是為設計師和開發者而設計的,便于他們定制屬于自己的新項目。目前這套柵格系統兼容Chrome、Firefox、Safari、Opera和IE9+。其中預制了12欄,當然你可以定制并增加更多。

4. Reverie

reverie1

Reverie 框架是一款基于ZUBR Foundation 的強大的HTML5 WordPress 框架。ZUBR Foundation 是一個強大的原型工具,以它為基礎來制作框架自然不會差,而Reverie 本身確實從中繼承了不少強大的功能。

5. Jeet

jeet1

Jeet 是一款市面上相對先進、設計直觀的柵格系統,你可以將它視作為Semantic.gs 的理念繼承者。借助強大的預處理功能,你可有使用真正意義上的百分比來設計柵格系統,這也意味著你可以按照客戶的描述直觀快速地設定柵格,沒有嚴格的12列柵格的限制,你可以更加快速的設計,使用更少的代碼來搞定一切。

6. 1KB Grid

1kbgrid

1KB Grid的設計靈感來自于1KB CSS柵格系統,這套基于SASS的柵格系統移除了HTML中多余的類,讓它更靈活也更加易于定制。當然,1KB Grid 并非嚴格意義上的1KB大小,新版的1KB Grid已經可以制作流動性更強的柵格。

7. Unsemantic

Unsemantic-CSS-Framework

Unsemantic 是一款流態柵格系統,基于960柵格系統演化而來。它們的工作原理很接近,但是Unsemantic 更加靈活,可以基于百分比來設定。

8. Bourbon Neat

Bourbon-Neat2

Neat 是一款在Sass和Bourbon的基礎上建立的語義柵格系統。它足夠簡單又功能強大,能在幾分鐘內配置好運行起來,足以應付任何響應式布局。

9. Herow

herow

Herow 是一款省時省力的柵格系統,內置混入組件易于定制,可以處理各種各樣的響應式的問題,并且能夠和CSS輕松聯動。

10. Rebar

rebar

Rebar 希望能讓響應式開發更加簡單有效,并且讓CSS樣式保持條理。為了實現這些功能,開發者設定了一個斷點列表,并且為每個斷點設定了一個單獨的柵格設置和容器類,這樣可以更便捷地填充間隔,實際上BootStrap 3 的柵格系統也是這么做的。

11. Sassline

Sassline1

Sassline 使用Sass和Rems技術讓你更輕松地為文本內容制作柵格系統。Sassline 讓你可以為每個斷點設定模塊比例,配合不同類型的內容和布局。

12. Skelton

skelton

Skeleton 是一個小型的CSS文檔合集,可以幫你快速開發一個看起來不錯的網站,確保網站在17寸筆記本和iPhone上看起來都不錯,它的設計原則有三條:響應式柵格向下兼容移動端,快速上手和無風格關聯。

13. Gridism

gridism

Gridism 是一款簡單易用的柵格系統。在低于568px 的屏幕上,柵格會被堆疊起來,而在此以上,比如978px和1140px上布局會更加自由。

14. One % CSS Grid

One-CSS-Grid

One % CSS Grid 是一款基于百分比的12欄流態柵格系統,用來快速構建響應式網頁。作為初始設定,可以選用最低1280px 的屏幕,也可以選取更低的1024px 的屏幕。

15. Columnal

columnal

Columnal 是一款源自Cssgrid.net的柵格系統,而其中的一部分代碼和設計靈感則來自經典的960.gs。這款柵格系統和其他的同類差不多,兼容桌面端和移動端的設計。

16. Less Framework

lessframework41

Less Framework 是一款自適應的CSS柵格系統,內置了4種布局和3種排版,都是基于同一種柵格。Less Framework旨在高效直觀地建設網站。

17. Responsive Grid System

Responsive-Grid-System1

Responsive Grid System 是一款流動性良好的CSS柵格框架,其中內置了12欄、16欄和24欄三種柵格模式,可為所有主流、標準設備屏幕進行媒體查詢。

18. Ingrid

ingrid

Ingrid 是一款輕量級的流態CSS柵格布局系統,開發者在設計這套系統的時候旨在減少針對獨立單元類的使用。相比于傳統的柵格系統,Ingrid 更加有趣也更加靈敏。作為一套可拓展的系統,它擁有著相當不錯的定制性。

19. The Square Grid

the-squire-grid

The Square Grid 是一款基于36欄柵格的簡單CSS框架,這意味著你可以將它輕松等分成18、12、9、6、4、3、2等不同的欄數,它的總寬度是994px,兼容目前絕大多數的屏幕。

20. Fluid Baseline Grid

fluid-baseline-grid

Fluid Baseline Grid 結合了流動性布局的設計思路和排版標準,融入了移動端優先的設計思想,這些東西促成了整個框架獨立且脫離分辨率限制的特征。它包含了規范的CSS樣式、漂亮的排版,確保了在常用瀏覽器中一致的視覺效果和良好的可用性。

【往期設計圈干貨合集】

一月干貨合集:《干貨駕到!2015年一月設計圈干貨大合集》
二月干貨合集:《來收最新干貨!二月份免費設計資源+實用工具大合集!》
三月干貨合集:《月底福利!三月設計圈干貨大合集第一波》
四月干貨合集:《四月福利!30+酷炫實用的免費APP設計模板》
五月干貨合集:《有好貨!五月必收的優質設計資源干貨大合集》
六月干貨合集:《假期福利!六月設計圈高品質干貨大合集》
七月干貨合集:《七月干貨!幫你發掘高素質圖標的50個優質網站》
八月干貨合集:《不要錯過!姍姍來遲的八月設計圈干貨大合集》

原文地址:codegeekz
優設譯者:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量101萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 3

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏