由于博主正在学习英文，因此本博文使用英语优先，国语辅助的书写方式。

since the blogger is the learning English, this post is written in English with the help of chinese.

Flex layout

父元素盒子常用属性（标黑的属性值为默认值）

flex-direction

描述：设置主轴的方向。

属性值： row | row-reverse | column | column-reverse

flex-wrap

描述：设置元素溢出是否换行。

属性值：nowrap | wrap | wrap-reverse

justify-content

描述：设置子元素在主轴上的对齐方式。

属性值：flex-start | flex-end | center | space-around | space-between | space-evenly

align-item

描述：设置子元素在交叉轴上的对齐方式。

属性值：stretch | flex-start | flex-end | center | baseline

align-content

描述：主要针对多行的弹性盒子布局，行和行之间基于父盒子而言的垂直对齐方式。

子元素盒子（单独的 flex 项目）常用属性

align-self

描述：单独的 flex 项目的在交叉轴上的对齐方式

属性值：auto | stretch | flex-start | flex-end | center | baseline

order

描述：flex 项目的在主轴上的元素优先级

属性值：0，-1（值越小排列越前）

flex-grow

描述：flex 项目是否在父盒子有剩余位置时有增长系数。就是去分父盒子的大小。

属性值：0（表示不分），1（表示分剩余大小的 1 份），2（表示分剩余大小的 2 份）

flex-shrink

描述：flex 项目是否在父盒子大小不足时伸缩此元素的占比。仅在默认宽度之和大于父盒子时才会发生收缩。

属性值：1，2（收缩两份），3（收缩三份）…

flex-basis

描述：flex 项目在主轴方向上的初始大小。

属性值：auto（设置 auto 后会去根据过度约束公式自动分配大小），300px (初始的宽度为 300px，会替换 width )

The development of trillo

svg icon library：icomoon.io

Experience the address : trillo — Your all-in-one booking app

warehouse address : https://github.com/wu-honghao/trillo

Initial project

Package manager

npm init to generate package.json file

Automated scripts

scss compiles, add browser prefixs, compresses code, packages production css, and automatically opens local servers

1
2
3
4
5
6
7
8
9
10
// package.json
"scripts": {
        "watch:sass": "node-sass sass/main.scss css/style.css -w",
        "devserver": "live-server",
        "start": "npm-run-all --parallel devserver watch:sass",
        "compile:sass": "node-sass sass/main.scss css/style.comp.css",
        "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
        "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
        "build:css": "npm-run-all compile:sass prefix:css compress:css"
 }
Sass workflows

catalogue

  1. _base.scss : css variable, root or body setting
  2. _layout.scss : header, sidebar, main and other outer containers
  3. _component.scss : components
  4. main.scss : mixin the above scss files
Custom CSS Variables of the project
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:root {
    --color-primary: #eb2f64;
    --color-primary-light: #ff3366;
    --color-primary-dark: #ba265d;

    --color-grey-light-1: #faf9f9;
    --color-grey-light-2: #f4f2f2;
    --color-grey-light-3: #f0eeee;
    --color-grey-light-4: #ccc;

    --color-grey-dark-1: #333;
    --color-grey-dark-2: #777;
    --color-grey-dark-3: #999;

    --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
    --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);

    --line: 1px solid var(--color-grey-light-2);
}

use technology

  1. layout : flexbox, horizantal realize use justify-content attribute or space-around attribute value.

  2. nav-icon : svg or the icon from icon library

    1
    2
    3
    <svg class="user-nav__icon">
        <use xlink:href="img/sprite.svg#icon-chat"></use>
    </svg>

use technology

  1. layout : flexbox, vertical layout realize use flex-direction:colunm
  2. menu hover effect : through timeout transition attribute。通过 transition 属性延时设置实现分段过渡。

Overview of hotel-view

use technology

  1. btn_inline : animation is defined by @keyframes attribute, since user focus it and touch off it’s animation infinite.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@keyframes pulsate {
    0% {
        transform: scale(1);
        box-shadow: none;
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25);
    }

    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

Custom list bullet

use technology

  1. pseudo element : ::before and setting it’s style from _component.scss 310-313

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .list::before {
        content: '';
        display: inline-block;
        height: 1rem;
        width: 1rem;
        margin-right: 0.7rem;

        background-color: var(--color-primary);
        // mask-image 用于设置元素上遮罩层的图像。
        -webkit-mask-image: url(../img/chevron-thin-right.svg);
        // mask-size 属性指定遮罩图像的大小。可以完全或部分限制图像的大小，以保持其固有比例
        -webkit-mask-size: cover;
        mask-image: url(../img/chevron-thin-right.svg);
        mask-size: cover;
        background-image: none;
    }

Btn

use technology

  1. hover effect : transform or change absolute element <span> top.