/lego.css

Primary LanguageJavaScript

lego.css

Write CSS like LEGO

`lego.css` 基于原子类和 `Pure CSS` 两者的**设计，可以帮助更快更轻松的编写页面 CSS 样式，平滑解决项目中 CSS 难复用、难扩展、难维护的问题。

架构

  1. Naming

    shortcut mean desc
    m margin ✓
    m{y}|{x} margin ✓
    m{t}|{x}|{b} margin ✓
    m{t}|{r}|{b}|{l} margin ✓
    p padding ✓
    w width ✓
    h height ✓
    s width&height ✓
    nw min-width ✓
    nh min-height ✓
    mw max-width ✓
    mh max-height ✓
    t top ✓
    r right ✓
    b bottom ✓
    l left ✓
    x left and right ✓
    y top and bottom ✓
    d- display ✓
    p- position ✓
    c color ✓
    h:? ?:hover{...} ✓
    h:(? ?) ...?:hover{...} ✓
    a:? ?:active{...} ✓
    a:(? ?) ...?:active{...} ✓
    f:? ?:focus{...} ✓
    f:(? ?) ...?:focus{...} ✓
    ?! ?{...!important} ✓

  2. Reset

    • Normalize.css

  3. Base

    • _variable
    • _mixins
    • _color
    • _icon
    • _typography
    • _layout
    • _button
    • _from
    • _table

  4. Component

    • accordion
    • breadcrumb
    • card
    • switch
    • tab
    • dialog

  5. Atomic

    1. flex
      • flex-direction → fd-row|row-reverse|column|column-reverse
      • flex-wrap → fw-nowrap|wrap|wrap-reverse
      • flex-flow → ff[flex-direction flex-wrap]
      • justify-content → jc-flex-start|flex-end|center|space-around|space-between|space-evenly
      • align-items → ai-stretch|flex-start|flex-end|center|baseline
      • align-content → ac-stretch|flex-start|flex-end|center|space-around|space-between
      • order → o
      • flex → flex[flex-grow flex-shrink flex-basis]
      • align-self → as-auto|flex-start|flex-end|center|baseline|stretch
    2. grid
      • [ ]
    3. color
      • color → c
      • background-color → bgc
      • border-color → bc
    4. font/text
      • font
      • font-family → ff-k|h|s|fs
      • font-style → fs-normal|italic|oblique|initial|inherit
      • font-size → fs
      • font-variant → fv-normal|small-caps|initial|inherit
      • font-weight → fw
      • direction → dir-ltr|rtl|initial|inherit
      • unicode-bidi → normal|embed|bidi-override|initial|inherit
      • line-height → lh
      • letter-spacing → ls
      • word-spacing → ws
      • text-align → ta-left|right|center|justify|inherit
      • text-decoration → td-text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;
      • text-indent → ti
      • text-shadow → ts:
      • text-transform → tr-none|capitalize|uppercase|lowercase|initial|inherit
      • white-space → normal|nowrap|pre|pre-line|pre-wrap|initial|inherit
      • justify-content → jc-
      • word-break → wb-normal|break-all|keep-all
      • word-wrap → ww-normal|break-word
      • text-justify → tj-auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim
      • text-overflow → clip|ellipsis|string
      • writing-mode → wm-horizontal-tb|vertical-rl|vertical-lr
      • user-select → auto|none|text|all
    5. box
      • display → d-none|block|inline|inline-block|inherit
      • box-sizing → bs-content-box|border-box
      • width → w
      • height → h
      • min-width → nw
      • min-height → nh
      • max-width → mw
      • max-height → mh
      • padding → p
      • margin → m
      • border → bd:
      • border-top → bdt:
      • border-right → bdr:
      • border-bottom → bdb:
      • border-left → bdl:
      • border-style → bds-none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit
      • border-width → bw
      • outline → ol:
    6. animate
      • animate
      • transition
      • keyframe
    7. element
      • position → p-absolute|fixed|relative|static|sticky
      • float → f-left|right|none|inherit
      • cursor → c-default|auto|pointer|move|text|wait|help
      • background
      • background-attachment → ba-fixed|local|scroll
      • background-size → bs-length|cover|contain
      • background-position → bp-center|top|right|bottom|right
      • background-repeat → br-repeat-y|repeat-x|no-repeat
      • background-image → bgi(url)
      • overflow → o-auto|hidden|scroll|visible
      • overflow-x → ox-auto|hidden|scroll|visible
      • overflow-y → oy-auto|hidden|scroll|visible
      • opacity → o
      • visibility → v-hidden|visible
      • vertical-align → va-baseline|top|text-top|middle|bottom|text-bottom
      • resize → r-none|both|horizontal|vertical
      • z-index → zi
    8. list
      • list-style → ls
      • list-style-image → lsi()
      • list-style-position → lsp-inside|outside
      • list-style-type → lst-none|disc|circle|square
      • marker-offset
    9. 伪类
      • :active
      • :any-link
      • :checked
    10. 伪元素
      • ::after
      • ::before
      • ::first-letter
      • ::first-line
      • ::marker
      • ::placeholder
      • ::selection

使用方式

  1. HTML<link> + PurgeCSS
  2. npm/yarn + PurgeCSS
  3. UnoCSS + rules

Fonts

https://github.com/zenozeng/fonts.css

ff-h|ff-k|ff-s|ff-fs