标签：
学习响应式网站设计已经持续了一段时间，对sass，less，compass，grunt等等有了整体上的了解认识，但是由于产品的不可预知性，以及前端要求使用sass语言而且不适用bootstrap，所以很多现有的响应式框架如Bootstrap,Golden Grid system,less Framework 4 ,Skelton等都无法使用，选来选去决定使用susy框架，susy使用sass书写，同时，Susy 的设计初衷是作为 Compass 平台的一部分，所以，使用 Compass。
susy的官方简介是这么描述susy的：“Your markup, your design, your opinions, out math.”因为她的设计初衷是一款进行栅格布局的辅助工具，这就决定了她不是一个css框架，很多css组件，js组件她都没有。
form元素在网站中的地位是非常重要的，<input>,<button>,<textarea>,<select>以及<label>,<a>等元素在网页中随处可见。这些样式中的复用性非常高，一个sass buttons组件非常不错叫做： Sassy Buttons，网址http://jaredhardy.com/sassy-buttons/使用她可以快速构建出适合可用又漂亮的buttons组件，bootstrap中的表单样式的多样化，合理的html及css dom安排同样有我们学习的地方。
http://bourbon.io/ Bourbon在这个领域做的也不错，标记一下。
两篇susy入门的文章1：http://www.w3cplus.com/preprocessor/susy-docs.html
2：http://www.w3cplus.com/preprocessor/susy2-tutorial.html
susy官网： http://susy.oddbird.net/
Responsive设计和CSS3 Media Queries的结合： http://www.w3cplus.com/css3/responsive-design-with-css3-media-queries
一篇响应式网站设计建议：http://www.qianduan.net/responsive-web-design/
一篇介绍use-css3-media-queries的文章：http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
w3c 中media-queries的文章： http://www.w3.org/TR/css3-mediaqueries/#media0
CSS Media Queries & Using Available Space：https://css-tricks.com/css-media-queries/
30+ CSS Grid System：http://www.w3cplus.com/source/30-css-grid-system.html
标签：
原文地址：http://www.cnblogs.com/c-and-unity/p/4476940.html
