用于创建响应式网站的17个灵活网格工具和框架

jopen 11年前

响应式网站拥有一个灵活的流体网格包括响应式图片。在这个集合，我们收集17个灵活的网格工具和框架，以帮助您创建具有视觉吸引力和功能齐全的响应网站。

Gridpak

Gridpak 的目的是实现了响应式的 Web 页面设计，提高您的工作流程，节省了时间。通过生成PNG图像，CSS和JavaScript，，让 Gridpak 创建响应式的简单界面。

Gridpak 产生的CSS 兼容 IE 8+，但它使用很多实验性的CSS属性，如媒体查询，盒大小和背景剪辑属性，所以我们建议您结合 Modernizer 来使用，确保向后兼容性。

一个的流体网格计算器建立你自己的流体网格系统。

Golden grid system是为增强网页兼容性设计的折叠式grid。具有四个特征：列、跨页、底线、script。

LESS框架对CSS语法的改革为更强大的网页布局方法的到来打下了坚实基础。而这个强大方法就是The Semantic Grid System框架。它就是CSS网格布局的新星。The Semantic Grid System使用 LESS的CSS方法提供一种新的页面布局方式.

1. 具备语义特征；

2. 布局方式，既可固定，也可浮动；

3. 可响应的；

4. 允许实时直接在样式表中修改列宽和列间距。

Columnal CSS Grid System由Pulp+Pixels aka的富有创造力的主管Nick Gorsline出品，基于1140px grid system，但是又有一些额外的优点，例如带草图框架的开发包和wireframing模板，以及CSS调试方式。

Simple Grid是又一套12分列的CSS格子框架，并且支持响应式设计。

一个伟大的响应式Grid系统是1140px CSS Grid，由Melboume 的设计师Andy Taylor制作，可以从宽的桌面解决方案缩小到移动应用。

像素百分比计算器，但是这个由Stu Robson做的计算器比其他人做的更近了一步，可以为您生成CSS规则，这意味着你只需复制黏贴到你的样式表就可以了。

Andy Clarke的320 and Up是一款移动优先的模板工具，它继承了很多流行的web设计工具，比如LESS和Bootstap等。这款工具是个轻量级的敏捷方法，能迅速让一个站点建立并运行起来。

这是一个12列灵活的网格，能够扩展到任意大小（最大宽度的行定义），也可以方便地嵌套，这样你就可以建立复杂的布局，创造了很多的自定义元素。

Gridless是一个HTML5与CSS3的模板工具，可以作为您的响应时设计的服务基础，它更关注拓扑以及跨浏览器的整合性能。

Victor Coulon制作了一款简单有效的书签工具，它就放进工具栏里面，您可以在任何也免激活它然后您就可以从普通屏幕尺寸和不同的预设尺寸之间切换并且查看区别了。

Adapt.js是一个很小的JavaScript文件，它能够根据页面的宽度来加不同的CSS文件。在浏览器渲染一个页面之前，它会检查其宽度然后决定该调用哪一个CSS文件。

利用Titan Framework 你可以创建响式布局，它能够在最大宽度限制下自适应任何屏幕分辨率。

Fluid grid CSS framework用于快速，直观的开发响应式网站。有12, 16 和 24 列。

Gumby 是一个响应式的以及 960 像素宽度的 CSS 网格框架，支持 PC、平板和手机屏幕显示。类似推ter 的 Bootstrap，它包括一个Web UI工具包，有好看按钮，表格，导航+标签和一个很小的JavaScript文件

Less+ Framework 是一个跨设备的CSS网格系统。可以让设计人员和开发人员能够根据屏幕分辨率构建适应其内容的网站。