zoukankan      html  css  js  c++  java
  • 响应式布局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- 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文件。

  • 相关阅读:
    CSS规范
    CSS规范
    CSS规范
    CSS function--(来自网易)
    CSS reset--(来自网易)
    js截取图片上传(仅原理)----闲的无聊了代码就不共享了!写的难看,不好意思给你们看了(囧)
    作业:JavaScript(数组篇-poker)给我的徒弟出个题。。。记得早点写完,然后大家3人可以早点打牌了
    BAT及各大互联网公司2014前端笔试面试题--JavaScript篇(昨天某个群友表示写的简单了点,然后我无情的把他的抄了一遍)
    BAT及各大互联网公司2014前端笔试面试题--Html,Css篇(昨天有个群友表示写的简单了点,然后我无情的把他的抄了一遍)
    本日吐槽!“人傻钱多”的P2P公司是否是程序员的合适选择(群聊天记录的娱乐)
  • 原文地址:https://www.cnblogs.com/c-and-unity/p/4476940.html
Copyright © 2011-2022 走看看