編寫大型項(xiàng)目web頁面樣式基礎(chǔ)搭建

smartlion 發(fā)布于2019-08-19 17:15 / 1462人閱讀

摘要：文中的一些方法來源于我的有出售請大家自行拷貝粘貼顏色要使用代詞加數(shù)字大小形式數(shù)字規(guī)格顏色變量不許由或者方法計(jì)算得出項(xiàng)目顏色基于配色基礎(chǔ)色庫設(shè)計(jì)師都會配出來項(xiàng)目色庫需要項(xiàng)目去改變設(shè)計(jì)師文字和前端頁面開發(fā)者文字必須為同一類

文中sass的一些方法 來源于我的sassstd zhilizhili-mei zhilizhili-ui
npm 有出售  請大家自行拷貝粘貼

color

顏色要使用代詞加數(shù)字大小形式
數(shù)字規(guī)格 50 100 200 ... a100 ... b100
顏色變量不許由sass或者postcss方法計(jì)算得出

$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；

// 項(xiàng)目顏色基于material design配色 基礎(chǔ)色庫設(shè)計(jì)師都會配出來 項(xiàng)目色庫需要項(xiàng)目去改變
$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

設(shè)計(jì)師文字和前端頁面開發(fā)者文字必須為同一類型
我覺得amazeui的文字設(shè)置就不錯
amaze ui 文字標(biāo)準(zhǔn)鏈接

$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);
}

當(dāng)然設(shè)計(jì)師有時會使用一些特殊字體特別英文項(xiàng)目很正常

    @font-face {
        font-family: "iconfont";
        src: url("http://at.alicdn.com/t/font_1450578408_6092355.eot"); /* IE9*/
        src: url("http://at.alicdn.com/t/font_1450578408_6092355.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("http://at.alicdn.com/t/font_1450578408_6092355.woff") format("woff"), /* chrome、firefox */
        url("http://at.alicdn.com/t/font_1450578408_6092355.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url("http://at.alicdn.com/t/font_1450578408_6092355.svg#iconfont") format("svg"); /* iOS 4.1- */
    }

這個時我的iconfont引用設(shè)計(jì)師如果想使用特殊字體必須提供eot woff ttf svg各一份字體
否則前端有權(quán)不使用該字體

當(dāng)然我也要教大家一些應(yīng)對方案

otf 轉(zhuǎn)為 ttf 地址
ttf 轉(zhuǎn)為 eot

fontxchange 恩這個軟件可以做到轉(zhuǎn)換為webfont 這個軟件mac有的 windows也有的不過沒去找破解版哈哈

英文字體大小不是很大可以直接使用中文字體由于體積很大所以需要優(yōu)化
優(yōu)化的方式就是搜集所有用到的字符再根據(jù)搜集到的字符重新生成一個新的字符文件

font-spider 做的還不錯但是有坑奧

icons

font-awesome 可能是大家第一時間想到的不過我想說的是iconfont或許更好

icon 是小圖標(biāo) class .icon
icon 有多種提供形式 iconfont fontawesome unicode svg img

// example    
.icon.iconfont 表明她是iconfont 類型的icon

sass 或者 postcss 編寫具體實(shí)現(xiàn)不管但是必須保證變量不可以由sass或postcss計(jì)算得出

$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

項(xiàng)目中所有布局都由layout提供

組件也可以使用layout 用來減少css代碼

// example

    
        left
        center
        right
        right

btn-group這個東西或許常見的是橫過來的不過誰知道他會不會被設(shè)計(jì)師設(shè)計(jì)成豎向的呢

layout 布局要實(shí)現(xiàn)基本的有 table flex center-set(水平垂直居中實(shí)現(xiàn))
不規(guī)定具體實(shí)現(xiàn)

番外篇

之前我有說過ie8的問題本來我是打算專門寫一篇文章的不過算了吧直接給大家?guī)砦业难芯?之前ie8加強(qiáng)到ie9 polyfill 一文中已經(jīng)解決一些問題現(xiàn)在帶來一個完整模板

jquery 部分大家自行選擇

")

ie9也有一些問題比如filereader之類的問題
webshim 給出了他的收集方案鏈接

ie9進(jìn)入grid布局時代 chrome 已經(jīng)原生支持 grid布局 firefox也支持grid布局 ie10開始支持grid布局使用polyfill我們使ie9進(jìn)入grid時代鏈接

大型web頁面用什么框架呢下一篇我們看看2015框架發(fā)展和2016的趨勢給出我的建議

云服務(wù)器 GPU云服務(wù)器大型web搭建 python大型項(xiàng)目頁面樣式大型java開源項(xiàng)目

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78352.html

發(fā)表評論

登陸后可評論

0條評論

smartlion

男|高級講師

我要關(guān)注我要私信

TA的文章

C++基礎(chǔ)語法（五）繼承——萬字總結(jié)，干貨滿滿

閱讀 3004·2021-10-12 10:12
虛擬主機(jī)的ip如何獲取-怎樣查看自己的虛擬主機(jī)ip地址？

閱讀 3052·2021-09-22 16:04
CSS<背景>

閱讀 3287·2019-08-30 15:54
這份優(yōu)化清單，你做了哪些？

閱讀 2602·2019-08-29 16:59
學(xué)習(xí)小結(jié) | Vue+TweenMax做一個溫度計(jì)

閱讀 2902·2019-08-29 16:08
氪信生活小程序Demo

閱讀 868·2019-08-29 11:20
CSS基礎(chǔ)教程

閱讀 3492·2019-08-28 18:08
高性能現(xiàn)代瀏覽器超大wav音頻的波形繪制方案

閱讀 647·2019-08-26 13:43

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

編寫大型項(xiàng)目web頁面樣式基礎(chǔ)搭建

相關(guān)文章