你的位置:首页 > 网页设计

[网页设计]响应式布局susy框架之入门学习篇


学习响应式网站设计已经持续了一段时间,对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       

遇到的问题:从网上down下来的susy,通过compass watch来观察实时编译 当其中有文件更改时,输出文件无法输出

解决方案:可能是因为在git上面的susy包文件集成了大量的mixin,所以再compass watch的时候特别慢 当然也可能不是这个原因,解决的办法是如果需要从.scss文件转成.css文件 执行此语句 compass compile 路径/文件名.scss。  

自定义的susy项目没有无法编译的情况:compass create —using susy <project name> 使用compass 和susy创建一个项目

在项目中导入@import "normalize";@import "compass";@import "susy";

// Configuring Susy Defaults
// global settings
// 12-column grid

 

$susy: ( flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columns: 4, gutters: .25, column-width: false, global-box-sizing: content-box, last-flow: to, debug: (  image: hide,  color: rgba(#66f, .25),  output: background,  toggle: top right, ), use-custom: (  background-image: true,  background-options: false,  box-sizing: true,  clearfix: false,  rem: true, ));

 

 根据config.rb中的配置使用compass watch 实时监测生成css文件。