响应式web设计:WEBJX收集50个响应式设计工具(2)

10. Columnal CSS Grid System

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

11. Semantic Grid System

像Sass和LESS的预处理的CSS扩展应用越来越流行了，Tyler Tate做的Semantic grid system使用了它们来最大地渲染grid系统，并宣称没有不需要的类或者元素。详情请访问这个链 接：http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid- system-page-layout-for-tomorrow/

12. SUSY

像Semantic Grid System一样，Oddbird的SUSY创建了一个Grid系统并不适用额外的标记语言或者特殊的类来实现。不过SUSY的目标用户只有Sass.

13. Gridpak

Erskine Design公司出品的Gridpak是最新的响应式grid生成器之一，它允许你设置你的栏，并且约束了一系列的断电，然后输出CSS，JavaScript或PNG文件，来保障您的整个团队都能从同样的出发点展开工作

14. Gridset

似乎Gridset笼罩着一层迷雾，因为在作者写这篇文章的时候它实际上还没有发布。但是这一款由Mark Boulton Design制作的工具是一款承诺定制的，非规范性的Grid系统，可以在线保存并管理Grid。

15. A Better Photoshop Grid for RWD

Ellot Jay Stocks建议放弃旧的960像素的Grid事实标准并使用基于1000像素的标准，这样能让百分比计算容易处理。如果你同意，他做了一个PSD你可以用它展开工作了。

16. Fluid Grids

如果你的设计高度专业化，您需要创建自己的自定义网格，您可以使用获取.net新人提名奖的杰出青年哈利罗伯茨的流体网格计算器。

17. Responsive Calculator

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

响应式图文的设计工具

响应式web设计的另一个关键组件。实现获取流体图像的技术是直接，优化性能和为不同设备页面加载，这似乎是在响应式web实际中最大的挑战了，以下是一些相关的资源。

18. Responsive Images

Filament工作组想出了一个办法发送合适的尺寸的图片，基于屏幕的解决方案。这个实验使用移动优先的尺寸相应，并且响应式调用两个不同的图片尺寸参考。

19. Adaptive Image

Matt Wilcox收到了Responsive Images工具的启发，创造了Adaptive Images使用PHP和一些小的JavaScript来为用户设备伺服图片，并不需要额外的标记语言。

20. Sencha.io Src（原来叫 Tinysrc）

Sencha提供了一个云服务，从云端发送适合用户设备尺寸的图片。如果您想看如何使用，请点击链接。

docs.sencha.com/io/src/