15個最新的響應式設計前端框架

你會發現,隨着響應式Web設計的不斷成熟,各類框架也變得越發健壯和可靠。也許是受到了Bootstrap、Foundation和Gumby的影響,如今很多新的框架都開始向一體化多功能的模式進化,它們提供了更多的功能,同時會包含可複用的組件和模塊,例如圖標、對話框、頁碼導航、麪包屑、導航欄等等。

當然,不是所有的框架都塞入了大量的功能,有些只是簡潔的提供了固定佈局的基礎。接下來是15個最新的響應式框架。

Girder


210553drp1133c7l13prru.jpg


通過Sass構建的Girder是一款最小化的網格系統工具集,可以幫你構造按邏輯分組的彈性佈局。它通過silent class(placeholders)在HTML中構建內容(讓你的HTML從過多的表現層class中解放出來),而且由於支持複雜的media queries,它可以根據項目需求調整尺寸。

查看詳情從Github上獲取

Cardinal


210554zkeytcmgmtyftfbe.jpg


Cardinal是一款聚焦於響應式Web應用的小型“移動優先”CSS框架,通過它,你可以更輕鬆的爲響應式Web應用構建原型或生產站點,並有效的維護樣式表。這款框架刻意忽略掉了一些表現樣式層面的東西,以避免成爲龐大而複雜的CSS框架,並將設計決策權完全交給你。

查看詳情從Github上獲取

Typeplate


210555gdj9tboblzdj7y86.jpg


Typeplate是一款用於文字排版的入門級工具。它不涉及過多的視覺樣式呈現,但是爲常見的文字排版模式提供了得當的且具有擴展性的標記。

查看詳情從Github上獲取

Gridism


210556wb1p1gapjx12q527.jpg


Gridism是一個簡單的CSS網格系統,內置了一些響應式相關的實現模式。

查看詳情從Github上獲取

Furatto


210557u4xj7zt4d0vdetjg.jpg


Furatto是一款扁平化風格的前端框架,特別適用於以其他框架爲基礎進行快速Web開發。

查看詳情從Github上獲取

PocketGrid


210558rpp6t9e6eeeetpe6.jpg


PocketGrid是一款輕量級(只有0.5kB)純CSS響應式網格系統,你可以通過它實現任意數量的縱列。PocketGrid擁有一套基於模塊及模塊組的彈性系統,而非傳統的通過行和列來創建網格。其中,模塊組類似於行,模塊本身則與列的概念相似。與傳統網格系統相比,PocketGrid的方式更加靈活。

查看詳情從Github上獲取

.Fitgrid


210558ntod5ldvmrjnomz5.jpg


.Fitgrd是一款爲了快速創建原型的需求而設計的框架(但在生產環境中的表現也很不錯),爲那些不想讓自己的頁面看上去太像bootstrap風格的設計師提供了一個堅實的基礎。這套網格系統包含了12個列,寬度基於百分比,每一列兩側都各有一個基於百分比的外邊距。

查看詳情從Github上獲取

Kraken


210559afk9zc3f09osskx1.jpg


Kraken是一款輕量級、移動優先的模板框架,僅包括一些最必需的功能:一個CSS重置文件,用來確保跨瀏覽器的兼容性;一個響應式的、移動優先的網格系統;一套設計優秀、液態排版的標尺;CSS3按鈕;最基本的視覺風格元素;還可以通過可選插件實現更多功能。

查看詳情從Github上獲取

Markup


210600i0ddpkwpbrrinz4d.jpg


Markup是一套佈局、掛件、UI風格和其他組件的合集,你可以在項目中直接使用,讓開發流程更快速高效。

查看詳情

Topcoat


210600zgqgbwqscqmq7szz.jpg


Topcoat是一款開源CSS框架,其主題可被高度定製化,讓你能夠更輕鬆的創建Web應用。

查看詳情從Github上獲取

Cascade


210601nmj44n830zm3444k.jpg


Cascade框架可以根據功能而不是選擇器來將你的CSS劃分到不同的文件當中,其設計風格在很大程度上受到SMACCS和OOCSS的影響。

查看詳情從Github上獲取

Responsable


210603yqmfrrdzrqftfqfw.jpg


Responsable是一款基於Semantic.gs和LESS的響應式網格系統。

查看詳情從Github上獲取

Ratchet


210604zidbk0t0kygw2iup.jpg


Ratchet可以幫你通過簡單的HTML、CSS和JavaScript製作移動應用的原型。

查看詳情從Github上獲取

Clank


210605l0m4ze44mpfibf0e.jpg


Clank也是一款可以幫你創建移動應用原型的開源框架。

查看詳情從Github上獲取

Responsive Web CSS


210606wu0bxndbcxq7jydl.jpg


Responsive Web CSS可以幫助你在幾分鐘內創建出頁面的佈局。你可以指定目標設備及分辨率,作爲響應式規則,然後便可以打包下載整站的代碼框架。

查看詳情

原文地址:http://www.uncletoo.com/html/html5/518.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章