10个用于设计响应式网站的实用CSS框架

jopen 11年前

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框架

示例