Skip to content
程枫 edited this page Jul 23, 2015 · 25 revisions

sass目录结构:

sass

不带vip部分的合并为frozen.css。

使用:

橙色字的是精简的basic.css,basic+vip为global.css。

http://i.gtimg.cn/vipstyle/frozenui/1.3.0/css/global.css

http://i.gtimg.cn/vipstyle/frozenui/1.3.0/css/basic.css

使用其他的css需要在项目内部引入,可以直接使用sass。

直接引用全部css(不带vip): http://i.gtimg.cn/vipstyle/frozenui/1.3.0/css/frozen.css, 带vip的http://i.gtimg.cn/vipstyle/frozenui/1.3.0/css/full.css

combo引用 : http://i.gtimg.cn/c/=/vipstyle/frozenui/1.3.0/css/reset.css,/vipstyle/frozenui/1.3.0/css/notice.css

修改记录

增加部分

  • base/rem 支持rem
  • base/icon 其他组件里用到的图标
  • base/icon-full 全部frozenui的图标
  • base/type 文本
  • util/nowrap 文字截断
  • util/placehold 占位,包括加载中的内容占位和普通图片占位
  • util/grid 网格,多行使用float,单行使用flex
  • util/whitespace 两边留白,320及以下两边10px,以上15px
  • util/justify 两端对齐的解决方案
  • util/layout 布局,头尾,flex布局
  • component/label 标签,两种
  • component/select 普通下拉框
  • component/input 普通一行输入框
  • component/actionsheet 菜单选择
  • component/panel 面板,带标题和内容

修改部分

  • base/reset 背景颜色改用#f8f8f8,去掉对input,textarea等样式重置
  • util/border 里增加圆角ui-border-radius,原来的ui-border改用背景的方式
  • component/searchbar 改背景色和线框
  • component/badge 增加ui-badge-num
  • component/reddot 修改红点颜色
  • component/avatar 修改头像大小60,80,100,140
  • component/btn 拆分出btn-progress
  • component/tooltips 修改样式,增加关闭icon
  • component/table 修改样式,使用背景实现1px
  • component/list 增加ui-list-pure,ui-list-one增加ui-list-thumb-s,ui-list-icon
  • component/form 增加checkbox和select在表单中的样式
  • component/progress 区分图片上的进度条和普通进度条,图片上的进度条写在ui-grid-halve和ui-grid-trisect结构内
  • component/tab 去掉了 fixed 定位,如果要固顶可结合ui-header使用
  • component/poptips, component/tooltips, component/checkbox, component/radio, component/tag, component/searchbar component/form, util/arrowlink 图标用iconfont实现

修改部分2(有dom修改的)

  • component/btn-group 修改底部按钮的样式,改成多个ui-btn-lg实现,原来的底部按钮改用 ui-footer-btn
  • component/newstips 修改名称和样式,使用最新的黑色背景,ui-tips-news改为 ui-newstips
  • component/loading 增加ui-loading-block,替代原来的 ui-dialog-notice
  • component/dialog dom中去掉 ui-btn-group

特别注意:

大面积的:active像list,form,slider,grid都改成.active,使用js实现按压态 代码可参考:

  $('.ui-list').delegate( "li", "click", function(e){
      var item = $(this);
      item.addClass('active');
      setTimeout(function(){
          item.removeClass('active');
      },300)
  });

list和form以及panel的title默认两边间距15px,320px及以下机型为10px

Clone this wiki locally