资讯专栏INFORMATION COLUMN

编写大型项目web页面 样式基础搭建

smartlion / 1424人阅读

摘要:文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类

文中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 做的还不错 但是有坑奥

icons

font-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代码

// example
left
center
right
right

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

相关文章

  • 编写大型项目web页面 样式基础搭建

    摘要:文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类 文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 请大家自行拷贝粘贴 showImg(ht...

    Dean 评论0 收藏0
  • 编写大型项目web页面 样式基础搭建

    摘要:文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类 文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 请大家自行拷贝粘贴 showImg(ht...

    cppprimer 评论0 收藏0
  • 编写大型项目web页面 从写web登陆页面开始

    摘要:页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具自动裁图自动测量工具我这里安利一下一个工具我用的可以使用阿里的工具拿到界面不要急着做看看有什么问题有些我都会问端问题如果要兼容我要考虑成本如果是一个人办可能会出现时间的 web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用...

    cangck_X 评论0 收藏0
  • 编写大型项目web页面 从写web登陆页面开始

    摘要:页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具自动裁图自动测量工具我这里安利一下一个工具我用的可以使用阿里的工具拿到界面不要急着做看看有什么问题有些我都会问端问题如果要兼容我要考虑成本如果是一个人办可能会出现时间的 web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用...

    骞讳护 评论0 收藏0
  • 编写大型项目web页面 从写web登陆页面开始

    摘要:页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具自动裁图自动测量工具我这里安利一下一个工具我用的可以使用阿里的工具拿到界面不要急着做看看有什么问题有些我都会问端问题如果要兼容我要考虑成本如果是一个人办可能会出现时间的 web页面搭建需要准备什么工具 首先我们会和设计师沟通 我们需要一些检验设计的工具 ps 自动裁图 自动测量工具 (我这里安利一下一个工具 我用...

    DevTTL 评论0 收藏0

发表评论

0条评论

smartlion

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<