Typography

Headings

(37.35px) h1. Bootstrap heading

(30.4px) h2. Bootstrap heading

(26.9333px) h3. Bootstrap heading

(23.4667px) h4. Bootstrap heading

(20px) h5. Bootstrap heading
(14px) h6. Bootstrap heading
(12px) small Bootstrap heading

colors

Background

.bg-primary
$c-blue
#03438D
.bg-primaryLight
$c-blueLight
#E2EDFA
.bg-secondary
$gray-600
#6c757d
.bg-success
$c-green
#83C51D
.bg-danger
$c-danger
#F57375
.bg-warning
$c-yellow
#EEC32A
.bg-pastel
$c-pastel
#9B9893
.bg-pasteltTrbidity
$c-pasteltTrbidity
#707070
.bg-info
.bg-light
$c-light
#EFECE7
.bg-dark
$c-dark
#000400
.bg-body
.bg-white
.bg-transparent

color (text)

.text-primary.text-primaryLight.text-secondary.text-success.text-danger.text-warning.text-pastel.text-info.text-light.text-dark.text-body.text-muted.text-white.text-black-50.text-white-50

Forms

Small
Default
Large
input type file 按鈕 (單選)
input type file 按鈕 (多選)
  • input 元素使用 type file 屬性，可配合 bootstrap 按鈕樣式模組規劃。
  • 在按鈕模組中需帶入字元內容
  • 點按要多選檔案，在 HTML 標籤屬性帶上 multiple

components

MetaWall

minHightPhoto

pseudoOneToOne

  • 使用者預設圖片基本樣式定義，使用 .c-pseudoOneToOne--user
  • 以偽元素規劃長寬 1:1 比例，以背景圖片樣式方式，防止取得不同入例圖片。
  • 容器與樣式分離管理與擴充
  • 圓型外框樣式分離，使用 .c-pseudoOneToOne--round 樣式對應設計稿上共用設定。
  • 可配合 bootstrap 的工具類 border 樣式，所增加的線框計算在容器之內 ( box-sizing: border-box; )

like

spinners

  • 多層行內 span 元素嵌套
  • 以相對與絕對元素組合，以不佔位方式程現讀取狀態

utilities

fontFamily

  • .u-fontFamily--PaytoneOne
  • .u-fontFamily--AzeretMono
  • .u-fontFamily--NotoSansTC
  • .u-fontFamily--BalooDa2
  • .u-fontFamily--Lato

shadows

.u-solidShadow-lb
.u-solidShadow-b
.u-solidShadow-rb
.u-opacityShadow-lb
.u-opacityShadow-b
.u-opacityShadow-rb
.u-solidDoubShadow-lb
.u-solidDoubShadow-b
.u-solidDoubShadow-rb