CSS

Quick notes

Safe fonts

A complete collection of web safe CSS font stacks.

Add two common fonts for Chinese characters: PingFang SC, Microsoft YaHei.

$font-family-serif:           Palatino, Georgia, "Times New Roman", "PingFang SC", "Microsoft YaHei", serif !default;
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Difference between Serif and Sans Serif

See this great inforgraphic: The Difference Between Serif And Sans-Serif Explained In One Infographic

Serif (left) and Sans Serif (right)

Material color palette

.link-disabled {
    pointer-events: none; /* This will diable effects when mouse hover, including cursor and underline */
    color: inherit;
}

Flex

flex is very flexible!

2018-04-14
北京古建筑博物馆
3.5小时 
<div class="d-flex mb-3 font-weight-bold">
    <div class="p-2 d-flex flex-column justify-content-center rounded z-depth-2">
        <i class="far fa-list-alt fa-lg fa-fw rounded"></i>
    </div>
    <div class="pl-1 indigo rounded"></div>
    <div class="p-2 d-flex flex-column justify-content-center rounded z-depth-1">
        <div class="p-2">
            <i class="fa fa-calendar fa-lg fa-fw"></i>
            <span class="px-2">2018-04-14</span>
        </div>
        <div class="p-2">
            <i class="fas fa-map-marker-alt fa-lg fa-fw"></i>
            <span class="px-2">北京古建筑博物馆</span>
        </div>
        <div class="p-2">
            <i class="fas fa-hourglass-half fa-lg fa-fw"></i>
            <span class="px-2">3.5小时</span>
        </div>
    </div>
</div>

Transition in and out with text shadow

Effects can be seen here

.bd-preview {

    .icon-more {
        opacity: 0;
        -webkit-transition: opacity .15s;   /* Must be set here, not in :hover */
        transition: opacity .15s;
    }

    .bd-title {
        text-shadow: 0 0 0 #fff;
        transition: text-shadow 0.15s;
        -webkit-transition: text-shadow 0.15s;
    }

    &:hover {

        .bd-title {
            text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25);
        }

        .icon-more {
            opacity: 1;
        }
    }
}