图标是利用 -face">font-face 规则自定义字体 实现的。

    使用的时候只需要加入对应的类名即可，例如 alert 图标，可以这样用：<i class="cubeic-alert"></i>。


    style - 图2

    源码地址：reset，使用的就是 Eric Meyer's Reset CSS。

    1. @require "./variable.styl"
    3. body, html
    4.   line-height: 1
    5.   font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
    6.   user-select: none
    7.   -webkit-tap-highlight-color: transparent
    9. .clear-fix
    10.   &::after
    11.     content: ""
    12.     display: table
    13.     clear: both
    15. .border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px
    16.   position: relative
    17.   &::before, &::after
    18.     content: ""
    19.     display: block
    20.     position: absolute
    21.     transform-origin: 0 0
    24.   &::before
    25.     border-top: 1px solid - color-row-line
    26.     left: 0
    27.     top: 0
    28.     transform-origin: 0 top
    30. .border-right-1px
    31.   &::after
    32.     border-right: 1px solid - color-col-line
    33.     top: 0
    34.     right: 0
    35.     height: 100%
    36.     transform-origin: right 0
    38. .border-bottom-1px
    39.   &::after
    40.     border-bottom: 1px solid - color-row-line
    41.     left: 0
    42.     bottom: 0
    43.     width: 100%
    44.     transform-origin: 0 bottom
    46. .border-left-1px
    47.   &::before
    48.     border-left: 1px solid - color-col-line
    49.     top: 0
    50.     left: 0
    51.     height: 100%
    52.     transform-origin: left 0
    54. @media (min-resolution: 2dppx)
    56.     &::before
    57.       width: 200%
    58.   .border-right-1px
    59.     &::after
    60.       height: 200%
    61.       transform: scale(.5) translateZ(0)
    62.   .border-bottom-1px
    63.     &::after
    64.       width: 200%
    65.       transform: scale(.5) translateZ(0)
    66.   .border-left-1px
    67.     &::before
    68.       height: 200%
    69.       transform: scale(.5) translateZ(0)
    71. @media (min-resolution: 3dppx)
    72.   .border-top-1px
    73.     &::before
    74.       width: 300%
    75.       transform: scale(.333) translateZ(0)
    76.   .border-right-1px
    77.     &::after
    78.       height: 300%
    79.       transform: scale(.333) translateZ(0)
    80.   .border-bottom-1px
    81.     &::after
    82.       width: 300%
    83.       transform: scale(.333) translateZ(0)
    84.   .border-left-1px
    85.     &::before
    86.       height: 300%

    原文: