0.0.9 • Published 7 years ago
Class Tools
CSS-UTILS is a css library that offer util classes frequently-used.
Size
Easily set element width or height use short classes.
Space
Set padding or margin from elements.
| ClassName | Example | Range | Description |
|---|
| p-x | .p-10 | 0, 5, ...100 | padding: 10px |
| pl-x | .pl-10 | 0, 5, ...100 | padding-left: 10px |
| pr-x | .pr-10 | 0, 5, ...100 | padding-right: 10px |
| pt-x | .pt-10 | 0, 5, ...100 | padding-top: 10px |
| pb-x | .pb-10 | 0, 5, ...100 | padding-bottom: 10px |
| pv-x | .pv-10 | 0, 5, ...100 | padding-top:10px;padding-bottom:10px; |
| ph-x | .ph-10 | 0, 5, ...100 | padding-left:10px;padding-right:10px; |
| ClassName | Example | Range | Description |
|---|
| m-x | .m-10 | 0, 5, ...100 | margin: 10px |
| ml-x | .ml-10 | 0, 5, ...100 | margin-left: 10px |
| mr-x | .mr-10 | 0, 5, ...100 | margin-right: 10px |
| mt-x | .mt-10 | 0, 5, ...100 | margin-top: 10px |
| mb-x | .mb-10 | 0, 5, ...100 | margin-bottom: 10px |
| mv-x | .mv-10 | 0, 5, ...100 | margin-top:10px;margin-bottom:10px; |
| mv-auto | | | margin-left: auto;margin-right: auto |
| mh-x | .mh-10 | 0, 5, ...100 | margin-left:10px;margin-right:10px; |
Text
The following utils can be used to add additional styles to texts.
| ClassName | Description |
|---|
.ellipsis | 文字溢出时沈略 |
.nowrap | 文字不换行 |
.lowercase | 转化为小写字母 |
.uppercase | 转化为大写字母 |
.capitalize | 转化为首字母大写 |
.bold | 文字粗体 |
.italic | 文字斜体 |
.tr | 文字右对齐 ➡️ |
.tl | 文字左对齐 ← |
.tc | 文字居中对齐 |
.vt | 文字垂直顶部对齐 |
.vm | 文字垂直居中对齐 |
.vb | 文字垂直底部对齐 |
Float
| ClassName | Description |
|---|
.fr | float right |
.fl | float left |
.clearfix | 添加在容器上清除浮动 |
Display
| ClassName | Description |
|---|
.inline | display inline |
.block | display block |
.inline-block | display inlin-block |
.none | display none |
Position
| ClassName | Description |
|---|
.relative | position relative |
.absolute | position absolute |
.fixed | position fixed |
.sticky | position fixed |
.top | 附着在顶部 |
.bottom | 附着在底部 |
.left | 附着在左侧 |
.right | 附着在右侧 |
.fillin | 填充整个容器 |
Pointer
| ClassName | Description |
|---|
.pointer | cursor pointer |
.not-allowed | cursor not-allowed |
.help | cursor help |
Visibility
| ClassName | Description |
|---|
.hidden | visibility hidden |
.visible | visibility visible |
.hover-pre-visible | visible when hover previous sibling |
.hover-parent-visible | visible when hover parent |
.hover-self-visible | visible when hover self |
.focus-pre-visible | visible when focus previous sibling |
.focus-parent-visible | visible when focus parent |