CSS原子类工具

• 用于主页面，需要少量添加样式修补的业务。
• 尽量不要在标签中累积超过3个以上的原子类，超过3个以后，请自定义class。
• 仅用于页面布局或样式修补，不要用于业务组件或基础组件中。

安装

npm install @mtjs/atomcss

使用

import '@mtjs/atomcss/dist/atomcss.css'

引用2x版本

import '@mtjs/atomcss/dist/[email protected]'

字体大小

.f12 - .f32

12 至 32，能被2整除的数，2x 下都双倍，.f24 - .f64

外边距与内边距

• .m0 - .m32、.mt0 - .mt32、 .ml0 - .ml32、.mr0 - .mr32、.mb0 - .mb32
• .p0 - .p32、.pt0 - .pt32、 .pl0 - .pl32、.pr0 - .pr32、.pb0 - .pb32

0 到 32，能被8或5整除的数，2x 下双倍，0 - 64

宽度与高度

w20 - w200、h20 - h200

20 到 200，能被20整除的数

百分比

.pct10 - .pct100

10 到 100,10 的倍数，加几个特殊的 25%、33.333%、66。666%

颜色

Ant Design 色彩

• 12个基础色 取基础色板的第6个颜色，共12个基础色
• 纯白和纯黑色
• 10级别的灰色

.c-geekblue    .bg-geekblue 
.c-purple      .bg-purple 
.c-magenta     .bg-magenta 
.c-red         .bg-red 
.c-orange      .bg-orange 
.c-volcano     .bg-volcano 
.c-cyan        .bg-cyan 
.c-green       .bg-green 
.c-blue        .bg-blue 
.c-lime        .bg-lime 
.c-yellow      .bg-yellow 
.c-gold        .bg-gold 
.c-white       .bg-white  
.c-black       .bg-black  
.c-gray-2      .bg-gray-2 
.c-gray-3      .bg-gray-3 
.c-gray-4      .bg-gray-4 
.c-gray-5      .bg-gray-5 
.c-gray-6      .bg-gray-6 
.c-gray-7      .bg-gray-7 
.c-gray-8      .bg-gray-8 
.c-gray-9      .bg-gray-9 
.c-gray-10     .bg-gray-10  
.c-gray-11     .bg-gray-11  
.c-gray-12     .bg-gray-12  

伸缩布局

尽量使用UI库自带的布局组件

.flex {display: flex;}
.flex-1 {flex: 1}
.flex-2 {flex: 2}
.flex-3 {flex: 3}
.flex-between {justify-content: space-between;}
.flex-wrap {flex-wrap: wrap; }
.flex-center-x {justify-content: center; }
.flex-center-y {align-items: center; }
.flex-center {justify-content: center;  align-items: center; }

文本对齐

.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}

文字溢出点点点显示

.line-1
.line-2
.line-3

边框

2x 下边框为 0.5px

.bdr { border: 1px solid rgba(0,0,0,0.15); }
.bdr-t { border-top: 1px solid rgba(0,0,0,0.15); }
.bdr-l { border-left: 1px solid rgba(0,0,0,0.15); }
.bdr-r { border-right: 1px solid rgba(0,0,0,0.15); }
.bdr-b { border-bottom: 1px solid rgba(0,0,0,0.15); }

display

.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;}

font-family

.fa{font-family: Arial;}
.ft{font-family: Tahoma;}
.fv{font-family: Verdana;}

font-style

.n{font-weight:normal; font-style:normal; white-space: normal;}
.b{font-weight:bold;}
.i{font-style:italic;}

position

.abs { position: absolute;}
.rel { position: relative;}