10個用于設計響應式網站的實用CSS框架

jopen 12年前發布 | 21K 次閱讀 CSS 響應式

Skeleton

Skeleton是一系列CSS和JS文件的集合,它可以幫你快速地調整網頁在不同分辨率下的顯示效果,無論是17寸的筆記本電腦還是一個iPhone。Skeleton以輕量級的960網格系統為基礎,可以優雅地等比例縮放桌面、平板、手機上的瀏覽尺寸。

10個實用用于設計響應式網站的CSS框架

示例

 

Responsive Grid System

The Responsive Grid System is a quick, easy & flexible way to create a responsive web site.

10個實用用于設計響應式網站的CSS框架

示例

 

Foundation

Foundation是一個易用的、強大的、靈活的框架,用于創建運行于任何設備上的網站原型和最終產品代碼。Foundation包含幾十種風格和元素,你可以快速將它們進行組合,然后通過布局和設計,形成最終產品。

10個實用用于設計響應式網站的CSS框架

示例

 

Bootstrap

bootstrap:簡單靈活可用于架構流行的用戶界面和交互接口的html,css,javascript工具集。基于html5、css3的 bootstrap,具有大量的誘人特性:友好的學習曲線,卓越的兼容性,響應式設計,12列格網,樣式向導文檔,自定義JQuery插件,完整的類庫,基于Less等。本系列教程遵循官方文檔結構來介紹bootstrap,包括手腳架(Scaffolding),基礎CSS,組件,javascript插件,使用LESS與自定義10個實用用于設計響應式網站的CSS框架

示例

 

Golden Grid System

Golden grid system是為增強網頁兼容性設計的折疊式grid。具有四個特征:列、跨頁、底線、script。

10個實用用于設計響應式網站的CSS框架

示例

 

320 and Up

320 and Up使用一個小型屏幕樣式表,以防止移動設備加載桌面資源。其中樣式表中包含了一些顏色、排版布局等設置屬性。

10個實用用于設計響應式網站的CSS框架

示例

 

Lessframework

Less框架是一個用于設計自適應網站的CSS網格系統,它包含4個布局和3套預設布局,這些都以一個單一網格為基礎。Less框架的目標是更高效地創建多布局網站,并在布局之間保持一致。

10個實用用于設計響應式網站的CSS框架

示例

 

CSS Grid

1140網格可以完美適應1280分辨率顯示器。在較小的顯示器上,它可以根據瀏覽器的寬度變成流體形式,并自適應瀏覽窗口。

10個實用用于設計響應式網站的CSS框架

示例

 

Framelessgrid

Frameless和Golden Grid System類似,是通過逐列(column by column)形式來自適應頁面布局,而不是通過逐像素(pixel by pixel)形式。Frameless不是一個框架,因為它不包含任何代碼,它只是一個特定類型的自適應網格的想法,你可以將它作為設計工作的一個很好的出發點。

10個實用用于設計響應式網站的CSS框架

示例

 

Wirefy

假如你是一個Web設計/開發人員,第一次為一個Web項目創建wireframes,那么Wirefy將會給你很大的幫助。

它是一個CSS-JS  框架用于快速創建響應和跨瀏覽器線框wireframe布局。

這個框架包括主流的Web設計元素風格如:typography, grid, tables, images, forms, buttons, pagination,slideshow等。

10個實用用于設計響應式網站的CSS框架

示例

 

Gumby Framework

Gumby 960 是一個960響應式網格框架。Gumby完全可定制,并支持HTML5 和 CSS3。這個框架包含非常多的樣式和常用界面元素包括::forms, buttons, tabs, 和純 CSS dropdowns.

Gumby 960 采用MIT開源協議,擁有多個版本如:12列, 16列和混合型。它還擁有PSD文件來簡化開發。

10個實用用于設計響應式網站的CSS框架

示例

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!