响应式布局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文件。
响应式布局susy框架之入门学习篇的更多相关文章
- 利用media query写响应式布局
最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/829301 ...
- 响应式布局及bootstrap(实例)
说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...
- PC 端响应式布局
前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- html响应式布局,css响应式布局,响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- 【css】响应式布局入门【转】
最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- HTML5学习总结-番外05 响应式布局
1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
随机推荐
- java之多线程(Thread)
package DEMO; //主线程 public class Example12_2 { public static void main(String [] args ) { Thread myd ...
- Xcode 8 打包上线 iTunes Connect 找不到构建版本
Xcode 8 打包上线 iTunes Connect 找不到构建版本 最近苹果推出新的mac操作系统(macOS Sierra 10.12),大家可能都已经升级了,作为一个开发者,小编肯定是第一时间 ...
- codeforces723 D. Lakes in Berland(并查集)
题目链接:codeforces723 D. Lakes in Berland 参考博客:http://www.cnblogs.com/Geek-xiyang/p/5930245.html #inclu ...
- 最小生成树练习2(Kruskal)
两个BUG鸣翠柳,一行代码上西天... hdu4786 Fibonacci Tree(生成树)问能否用白边和黑边构成一棵生成树,并且白边数量是斐波那契数. 题解:分别优先加入白边和黑边,求出生成树能包 ...
- PHP换行符详解 PHP_EOL,<br />
1.PHP_EOL:用于文本的换行符,经常用于日志文件记录.可以解决: 在windows中\r\n是换行在Mac中\r是换行在Liunx中\n是换行 不统一的问题. 2. <br /> : ...
- PHP 命名空间加载的理解
关于spl_autoload_register()和__autoload(),相信大多数都会选择前者了? 看两者的用法: //__autoload用法function __autoload($clas ...
- NetworkComms框架介绍 序列化并发送对象
NetworkComms网络通信框架序言 英文原文:http://www.networkcomms.net/custom-objects/ NetworkComms.Net网络库,支持发送自定义类,并 ...
- js 数组去除空值
for(var i = 0 ;i<wordarr.length;i++) { if(wordarr[i] == "& ...
- POJ 2159 Ancient Cipher 难度:0
题目链接:http://poj.org/problem?id=2159 #include <cstring> #include <cstdio> #include <cc ...
- HDU 2181 哈密顿绕行世界问题 dfs 难度:1
http://acm.hdu.edu.cn/showproblem.php?pid=2181 只有20个城市,而且每个点的度数恰好是3,也就意味着,对于即将进入环中的点,入度1,出度2,下一个点只有两 ...