尺寸
$basic-font-sizes: (
"xs": 12px,
"sm": 12px,
"md": 14px,
"lg": 16px,
"xl": 16px,
);
类名 | 大概相当于 CSS |
---|---|
c-h-xs | font-size: 12px; line-height: 12px; |
c-h-sm | font-size: 12px; line-height: 12px; |
c-h-md | font-size: 14px; line-height: 14px; |
c-h-lg | font-size: 16px; line-height: 16px; |
c-h-xl | font-size: 16px; line-height: 16px; |
圆角
$basic-rounded-sizes: (
"xs": 4px,
"sm": 4px,
"md": 8px,
"lg": 12px,
"xl": 12px,
);
类名 | 大概相当于 CSS |
---|---|
c-rounded-xs | border-radius: 4px; |
c-rounded-sm | border-radius: 4px; |
c-rounded-md | border-radius: 8px; |
c-rounded-lg | border-radius: 12px; |
c-rounded-xl | border-radius: 12px; |
flex 布局
类名 | 大概相当于 CSS |
---|---|
o-flex c-column c-row | display: inline-flex; |
c-justify-start | justify-content: flex-start; |
c-justify-center | justify-content: center; |
c-justify-end | justify-content: flex-end; |
c-justify-between | justify-content: space-between; |
c-justify-evenly | justify-content: space-evenly; |
c-justify-around | justify-content: space-around; |
c-items-start | align-items: flex-start; |
c-items-center | align-items: flex-center; |
c-items-end | align-items: flex-end; |
c-items-baseline | align-items: baseline; |
c-items-stretch | align-items: stretch; |
间距
$sizes: (
"xs": 4px,
"sm": 8px,
"md": 12px,
"lg": 16px,
"xl": 24px,
);
.o-[p | m][a | x | y| l | t | r | b]-[xs | sm | md | lg | xl]
类名 | 大概相当于 CSS |
---|---|
c-pa-md | padding: 12px; |
c-mr-sm | margin-right: 8px; |
c-px-lg | padding-left: 16px; padding-right: 16px; |
... | ... |
栅格
Casual UI 使用经典的 12 栅格机制
c-col-[colSize]
子元素间距
提示
该项需要配合.c-row
或者.c-column
使用
.c-gutter[-x | -y ]-[xs | sm | md | lg | xl]
类名 | 含义 |
---|---|
c-gutter-x-[size] | 水平方向上子元素具有[size] 大小的间距 |
c-gutter-y-[size] | 垂直方向上子元素具有[size] 大小的间距 |
c-gutter-[size] | 水平与垂直方向上子元素具有[size] 大小的间距 |
一些示例
col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-3 + gutter-md
col-3 + gutter-md
col-3 + gutter-md
col-3 + gutter-md
col-4 + gutter-lg
col-4 + gutter-lg
col-4 + gutter-lg
贝塞尔曲线
宫格
类名 | 大概相当于 CSS |
---|---|
o-gid | display: grid; |
c-grid-col-[1-12] | grid-template-columns: repeat([1-12], 1fr) |
c-grid-row-[1-12] | grid-template-rows: repeat([1-12], 1fr) |
c-grid-gap-xs | gaps: 4px; |
c-grid-gap-sm | gaps: 8px; |
c-grid-gap-xs | gaps: 12px; |
c-grid-gap-lg | gaps: 16px; |
c-grid-gap-xl | gaps: 24px; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16