摘要:文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类
文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 请大家自行拷贝粘贴color
颜色要使用代词加数字大小形式
数字规格 50 100 200 ... a100 ... b100
颜色变量不许由sass或者postcss方法计算得出
$material-colors: ( "red": ( "50": #ffebee, "100": #ffcdd2, "200": #ef9a9a, "300": #e57373, "400": #ef5350, "500": #f44336, "600": #e53935, "700": #d32f2f, "800": #c62828, "900": #b71c1c, "a100": #ff8a80, "a200": #ff5252, "a400": #ff1744, "a700": #d50000 ) )!global; // 项目颜色基于material design配色 基础色库设计师都会配出来 项目色库需要项目去改变 $custom-color: map-extend($material-colors, ( "blue": ( "500": #0f8ffe, "600": #0088ff ), "red": ( "600": #f26c4f ), "green": ( "600": #d6e9ba ), "yellow": ( "600": #ecf82c ), "purple": ( "600": #e22cf8 ), "grey": ( "400": #c2c2c2, "500": #898989, "600": #464646 ) )) !global; @function get-custom-color($name, $level: "600") { @return map-deep-get($custom-color, $name, $level); }font
设计师文字和前端页面开发者文字必须为同一类型
我觉得amazeui的文字设置就不错
amaze ui 文字标准链接
$font-family: ( "amazeui": ("Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif), "sans-serif": ("Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif), "serif": (Georgia, "Times New Roman", Times, SimSun, "FontAwesome", serif), //FangSong, STFangSong "monospace": (Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace), "kai": (Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif) ) !global; @function get-font-family($name) { @return map-deep-get($font-family, $name); } @mixin interface-font() { .font { @content; } } @mixin use-font() { $defaults: ( ".font": ( ) ); @include interface-font() { @include register-hook("font"); @content; } } @mixin use-font-family($font-family-name, $sel) { #{$sel} { font-family: get-font-family($font-family-name); } } @mixin use-amazeui-font($sel: body) { @include use-font-family("amazeui", $sel); } @mixin use-sans-serif-font($sel: body) { @include use-font-family("sans-serif", $sel); } @mixin use-serif-font($sel: body) { @include use-font-family("serif", $sel); } @mixin use-monospace-font($sel: body) { @include use-font-family("monospace", $sel); } @mixin use-kai-font($sel: body) { @include use-font-family("kai", $sel); }
当然设计师有时会使用一些特殊字体 特别英文项目 很正常
@font-face { font-family: "iconfont"; src: url("//at.alicdn.com/t/font_1450578408_6092355.eot"); /* IE9*/ src: url("//at.alicdn.com/t/font_1450578408_6092355.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("//at.alicdn.com/t/font_1450578408_6092355.woff") format("woff"), /* chrome、firefox */ url("//at.alicdn.com/t/font_1450578408_6092355.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url("//at.alicdn.com/t/font_1450578408_6092355.svg#iconfont") format("svg"); /* iOS 4.1- */ }
这个时我的iconfont引用 设计师如果想使用特殊字体 必须提供eot woff ttf svg各一份字体
否则前端有权不使用该字体
当然 我也要教大家 一些应对方案
otf 转为 ttf 地址
ttf 转为 eot
fontxchange 恩 这个软件可以做到转换为webfont 这个软件mac有的 windows也有的 不过没去找破解版 哈哈
英文字体大小不是很大 可以直接使用 中文字体由于体积很大 所以需要优化
优化的方式就是 搜集所有用到的字符 再根据搜集到的字符重新生成一个新的字符文件
font-spider 做的还不错 但是有坑奥
iconsfont-awesome 可能是大家第一时间想到的 不过我想说的是iconfont或许更好
icon 是小图标 class .icon
icon 有多种提供形式 iconfont fontawesome unicode svg img
// example .icon.iconfont 表明她是iconfont 类型的icon
sass 或者 postcss 编写 具体实现不管 但是必须保证变量不可以由sass或postcss计算得出
$iconfont: ( "vars": ( "bule-tooth": "e600", "moon": "e601", "fastforward": "e602", "plane": "e603", "add": "e604", "drag": "e605", "more": "e606", "rewind": "e607", "search": "e608", "star": "e609", "world": "e60a", "lock": "e60b", "list": "e60c", "volume-off": "e60d", "share-arrow": "e60e", "airplay": "e60f", "close": "e610", "glass": "e611", "read": "e612", "add-square": "e613", "pause": "e614", "wifi": "e615", "user": "e616", "back": "e617", "close-circle": "e618", "location": "e619", "share": "e61a", "volume-up": "e61b", "right": "e61c", "circle": "e61d" ) ) !global; @function get-iconfont-var($name) { @return map-deep-get($iconfont, "vars", $name); } @mixin use-iconfont-iosicons() { $icons: map-deep-get($iconfont, "vars"); .iconfont { @each $iconname, $iconunicode in $icons { &.#{$fa-css-prefix}-#{$iconname}:before { content: $iconunicode; } } } }layout
项目中所有布局 都由layout提供
组件也可以使用layout 用来减少css代码
// exampleleftcenterrightright
btn-group这个东西或许常见的是横过来的 不过谁知道 他会不会被设计师设计成竖向的呢
layout 布局要实现基本的有 table flex center-set(水平垂直居中实现)
不规定具体实现
之前我有说过ie8的问题 本来我是打算专门写一篇文章的 不过算了吧 直接给大家带来我的研究 之前ie8加强到ie9 polyfill 一文中已经解决一些问题 现在带来一个完整模板
jquery 部分大家自行选择
")
ie9也有一些问题 比如filereader之类的问题
webshim 给出了他的收集方案 链接
ie9进入grid布局时代 chrome 已经原生支持 grid布局 firefox也支持grid布局 ie10开始支持grid布局 使用polyfill我们使ie9进入grid时代 链接
大型web页面用什么框架呢 下一篇我们看看2015框架发展和2016的趋势 给出我的建议文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78352.html
摘要:文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类 文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 请大家自行拷贝粘贴 showImg(ht...
摘要:文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类 文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 请大家自行拷贝粘贴 showImg(ht...
摘要:页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具自动裁图自动测量工具我这里安利一下一个工具我用的可以使用阿里的工具拿到界面不要急着做看看有什么问题有些我都会问端问题如果要兼容我要考虑成本如果是一个人办可能会出现时间的 web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用...
摘要:页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具自动裁图自动测量工具我这里安利一下一个工具我用的可以使用阿里的工具拿到界面不要急着做看看有什么问题有些我都会问端问题如果要兼容我要考虑成本如果是一个人办可能会出现时间的 web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用...
摘要:页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具自动裁图自动测量工具我这里安利一下一个工具我用的可以使用阿里的工具拿到界面不要急着做看看有什么问题有些我都会问端问题如果要兼容我要考虑成本如果是一个人办可能会出现时间的 web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用...
阅读 2968·2021-10-12 10:12
阅读 2998·2021-09-22 16:04
阅读 3261·2019-08-30 15:54
阅读 2567·2019-08-29 16:59
阅读 2820·2019-08-29 16:08
阅读 829·2019-08-29 11:20
阅读 3462·2019-08-28 18:08
阅读 608·2019-08-26 13:43