编写大型项目web页面款式基本搭建

2019年8月30日 182次阅读来源: andypinet

文中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也有的不过没去找破解版哈哈
《编写大型项目web页面款式基本搭建》

英笔墨体大小不是很大能够直接运用中笔墨体因为体积很大所以须要优化
优化的体式格局就是汇集一切用到的字符再依据汇集到的字符从新天生一个新的字符文件

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
<div class="btn-group">
    <div class="layout flex horizontal align-items-center" role="group">
        <div class="btn layout__item active">left</div>
        <div class="btn layout__item">center</div>
        <div class="btn layout__item">right</div>
        <div class="btn layout__item">right</div>
    </div>
</div>

btn-group这个东西也许罕见的是横过来的不过谁知道他会不会被设想师设想成竖向的呢

layout 规划要完成基础的有 table flex center-set(程度垂直居中完成)
不划定详细完成

番外篇

之前我有说过ie8的题目原本我是盘算特地写一篇文章的不过算了吧直接给人人带来我的研讨之前ie8加强到ie9 polyfill 一文中已处理一些题目如今带来一个完全模板

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/assets/static/css/normalize.css">
        <script src="/assets/static/oldie/modernizr-2.8.3.min.js"></script>
        <!-- 统共35k 供应了dom3 es5 大部份功用 -->
        <!--[if IE 8]>
        <script src="./assets/static/oldie/es5-shim.min.js"></script>
        <script src="./assets/static/oldie/es5-sham.min.js"></script>
        <script src="./assets/static/oldie/ie8.min.js"></script>
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <script src="/assets/static/oldie/calc.min.js"></script>        
        <![endif]-->
        <!-- dom4级 功用 -->
        <script src="../../public/js/modren-browser/dom4.min.js"></script

    </head>
    <body>
        <!--[if lt IE 8]>
        <div class="browsehappy">
            <p>
                You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.
            </p>
        </div>
        <![endif]-->

        
    </body>
</html>

jquery 部份人人自行挑选

<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="/assets/static/oldie/jquery-1.11.2.min.js"><\/script>')</script>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="//cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
<script>window.jQuery || document.write('<script src="/assets/static/oldie/jquery-2.1.3.min.js"><\/script>')</script>
<!--<![endif]-->

ie9也有一些题目比方filereader之类的题目
webshim 给出了他的网络计划链接

ie9进入grid规划时期 chrome 已原生支撑 grid规划 firefox也支撑grid规划 ie10最先支撑grid规划运用polyfill我们使ie9进入grid时期链接

大型web页面用什么框架呢下一篇我们看看2015框架生长和2016的趋向给出我的发起

    原文作者：andypinet
    原文地址: https://segmentfault.com/a/1190000004192369
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

文中sass的一些要领 泉源于我的sassstd zhilizhili-mei zhilizhili-ui

npm 有出卖 请人人自行拷贝粘贴

color

font

icons

layout

番外篇

大型web页面用什么框架呢 下一篇我们看看2015框架生长和2016的趋向 给出我的发起

文中sass的一些要领泉源于我的sassstd zhilizhili-mei zhilizhili-ui

npm 有出卖请人人自行拷贝粘贴

大型web页面用什么框架呢下一篇我们看看2015框架生长和2016的趋向给出我的发起