css-kit
v2.3.0
Published
CSS Toolkit
Downloads
15
Readme
css 工具箱 
一个用于快速构建 Web 界面的 CSS 工具库
- 无 reset 样式
- 无基础（h1-6、table 等）样式
- 仅包含工具类
安装
npm i css-kit --save使用
import 'css-kit'or 使用 lib 下的目录下 toolkit.css or toolkit.min.css 文件
文档
animation 基础动画
支持的动画如下
fade
.fadeIn,.fadeOut.fadeInUp,.fadeInDown
slide
.slideUp,.slideDown,.slideRight,.slideLeft
scale
.scaleUp,.scaleDown
flip
.flipIn,.flipOut
rotate
.rotateRight,.rotateLeft
other
.flash,.shake
borders 边框相关
边框类型
默认的 border-style 为 solid，默认的 border-color 为 #D9D9D9，默认的 border-radius 为 3px
下面的类名默认都有 border-style 和 border-color 的样式
.b0、.b1、.b2、.b3border-width 分别为 0, 1px, 2px, 3px，.bt0、.bt1、.bt2、.bt3上边框 border-width 分别为 0, 1px, 2px, 3px.br0、.br1、.br2、.br3右边框 border-width 分别为 0, 1px, 2px, 3px.bb0、.bb1、.bb2、.bb3下边框 border-width 分别为 0, 1px, 2px, 3px.bl0、.bl1、.bl2、.bl3左边框 border-width 分别为 0, 1px, 2px, 3px
hair border
0.5px 的边框，通过 :before，:after 以及 transform: scale 缩放来实现
.bht上边框.bhr右边框.bhb下边框.bhl左边框
边框其他样式
- .rounded { border-radius: $border-radius }
- .not-rounded { border-radius: 0 }
- .circle { border-radius: 50% }
colors 文字色，背景色，边框色
提供文字颜色、背景颜色、边框颜色支持的颜色
primary = #337ab7
success = #5cb85c
info = #5bc0de
warning = #f0ad4e
danger = #d9534f
white = #fff
silver = #F4F4F4
lightgrey = #ececec
grey = #ccc
midgrey = #777
darkgrey = #444
black = #222
trueblack = #000文字颜色、背景颜色、边框颜色，分别使用 color-xxx、bg-xxx、border-xxx（eg. color-success、bg-white、border-black）
提供
text-xxx作为color-xxx的别名
额外提供如下颜色类名
.c0 { color: #000 }
.c1 { color: #111 }
.c2 { color: #222 }
.c3 { color: #333 }
.c4 { color: #444 }
.c5 { color: #555 }
.c6 { color: #666 }
.c7 { color: #777 }
.c8 { color: #888 }
.c9 { color: #999 }
.ca { color: #aaa }
.cb { color: #bbb }
.cc { color: #ccc }
.cd { color: #ddd }
.ce { color: #eee }
.cf { color: #fff }depth zIndex 层级
.depth0 { z-index: -1 }
.depth1 { z-index: 1000 }
.depth2 { z-index: 2000 }
.depth3 { z-index: 3000 }
.depth4 { z-index: 4000 }
.depth5 { z-index: 5000 }
.depth6 { z-index: 6000 }
.depth7 { z-index: 7000 }
.depth8 { z-index: 8000 }
.depth9 { z-index: 9000 }
.depth10 { z-index: 10000 }flex 栅格布局，基于 flex
Flex 容器
.column {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: auto;
flex-wrap: nowrap;
}
.row {
display: flex;
flex: 1 1 auto;
height: auto;
flex-direction: row;
flex-wrap: wrap;
}Flex Items 定位
.center { align-items: center; justify-content: center }
.top-left { align-items: flex-start; justify-content: flex-start }
.bottom-right { align-items: flex-end; justify-content: flex-end }
.column.top-center { align-items: center; justify-content: flex-start }
.column.top-right { align-items: flex-end; justify-content: flex-start }
.column.center-left { align-items: flex-start; justify-content: center }
.column.center-right { align-items: flex-end; justify-content: center }
.column.bottom-left { align-items: flex-start; justify-content: flex-end }
.column.bottom-center { align-items: center; justify-content: flex-end }
.row.top-center { align-items: flex-start; justify-content: center }
.row.top-right { align-items: flex-start; justify-content: flex-end }
.row.center-left { align-items: center; justify-content: flex-start }
.row.center-right { align-items: center; justify-content: flex-end }
.row.bottom-left { align-items: flex-end; justify-content: flex-start }
.row.bottom-center { align-items: flex-end; justify-content: center }Flex Items 对齐
.space-around { justify-content: space-around }
.space-between { justify-content: space-between }
.align-top { align-items: flex-start }
.align-middle { align-items: middle }
.align-baseline { align-items: baseline }
.align-stretch { align-items: stretch }Flex Order
.order1 { order: 1 }
.order2 { order: 2 }
.order3 { order: 3 }
.order4 { order: 4 }
.order5 { order: 5 }
.order6 { order: 6 }
.order7 { order: 7 }
.order8 { order: 8 }
.order9 { order: 9 }
.order10 { order: 10 }Flex Size
.flex1 { flex: 1 }
.flex2 { flex: 2 }
.flex3 { flex: 3 }
.flex4 { flex: 4 }
.flex5 { flex: 5 }grid 栅格布局，基于 float
同 bootstrap 分为 12 栅格，从 .col-1 到 .col-12。
也同时提供 .col-pull-x、.col-push-x、.col-offset-x 系列类名
images 图片，背景图相关
背景图
.bg-no-repeat { background-repeat: no-repeat }
.bg-cover { background-size: cover }
.bg-contain { background-size: contain }
.bg-center { background-position: center }
.bg-top { background-position: top }
.bg-right { background-position: right }
.bg-bottom { background-position: bottom }
.bg-left { background-position: left }
.bg-fixed { background-attachment: fixed }
.bg-local { background-attachment: local }<img> 图片
.img-cover { object-fit: cover }
.img-contain { object-fit: contain }
.img-fill { object-fit: fill }
.img-scale-down { object-fit: scale-down }positioning 定位，浮动
定位
.relative { position: relative }
.absolute { position: absolute }
.fixed { position: fixed }
.top { top: 0 }
.right { right: 0 }
.bottom { bottom: 0 }
.left { left: 0 }浮动
.float-left { float: left }
.float-right { float: right }
/*清楚浮动*/
.clearfix:before, .clearfix:after {
display: table;
content: ' '
}
.clearfix:after { clear: both }提供
.pull-left，.pull-right以及.fl，.fr作为.float-left，.float-right的别名
sizing 宽高
宽
.w-auto { width: auto !important }
.w-inherit { width: inherit !important }
.w-initial { width: initial !important }提供以 5 为粒度，单位分别为 vw 和 % 的一系列类名如下
.vw5 { width: 5vw }
.vw10 { width: 10vw }
...
.vw100 { width: 100vw }
.w5 { width: 5% }
.w10 { width: 10% }
...
.w100 { width: 100% }高
.h-auto { height: auto !important }
.h-inherit { height: inherit !important }
.h-initial { height: initial !important }同样提供以 5 为粒度，单位分别为 vh 和 % 的一系列类名如下
.vh5 { height: 5vh }
.vh10 { height: 10vh }
...
.vh100 { height: 100vh }
.h5 { height: 5% }
.h10 { height: 10% }
...
.w100 { height: 100% }并额外提供几个最小高度的类名
.mh100 { min-height: 100px }
.mh200 { min-height: 200px }
.mh300 { min-height: 300px }
.mh400 { min-height: 400px }
.mh500 { min-height: 500px }typography 排版相关
文本对齐
.text-center { text-align: center }
.text-left { text-align: left }
.text-right { text-align: right }
.tc、.tl、.tr分别作为.text-center、.text-left、.text-right的别名
行高
.lh1 { line-height: 1.1 }
.lh2 { line-height: 1.2 }
.lh3 { line-height: 1.3 }
.lh4 { line-height: 1.4 }
.lh5 { line-height: 1.5 }
.lh6 { line-height: 1.6 }
.lh7 { line-height: 1.7 }
.lh8 { line-height: 1.8 }
.lh9 { line-height: 1.9 }
.lh-1 { line-height: 1 }
.lh-2 { line-height: 2 }
.lh-3 { line-height: 3 }字体大小
.fs-xx-small { font-size: xx-small }
.fs-x-small { font-size: x-small }
.fs-small { font-size: small }
.fs-medium { font-size: medium }
.fs-large { font-size: large }
.fs-x-large { font-size: x-large }
.fs-xx-large { font-size: xx-large }
.fs-smaller { font-size: smaller }
.fs-larger { font-size: larger }
.fs12 { font-size: 12px }
.fs13 { font-size: 13px }
.fs14 { font-size: 14px }
.fs15 { font-size: 15px }
.fs16 { font-size: 16px }
...
.fs47 { font-size: 47px }
.fs48 { font-size: 48px }其他字体样式
/*文字溢出隐藏*/
.cut {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 70ch;
}
.uppercase { text-transform: uppercase }
.lowercase { text-transform: lowercase }
.capitalize { text-transform: capitalize }
.italic { font-style: italic }
.tracked { letter-spacing: 4px }
.underline { text-decoration: underline }
.no-underline { text-decoration: none }
.list-style-none { list-style-type: none }
.thin { font-weight: 200 }
.regular { font-weight: 400 }
.bold { font-weight: 700 }utilities 显示隐藏滚动等工具类
display
.hidden { display: none }
.hide { display: none }
.none { display: none }
.block { display: block }
.inline { display: inline }
.inline-block { display: inline-block }
.flex { display: flex }
.inline-flex { display: inline-flex }同时
.db、.dib、.di作为.block、.inline、.inline-block的别名
overflow & Scrolling
.overflow-hidden { overflow: hidden }
.overflow-scroll { overflow: scroll }
.overflow-auto { overflow: auto }
.scroll-x {
overflow-x: scroll
overflow-y: hidden
}
.scroll-y {
overflow-x: hidden
overflow-y: scroll
}
.no-scrollbar::-webkit-scrollbar {
width: 0px
height: 0px
background: transparent
}同时
.ofh、.ofs、.ofa作为.overflow-hidden、.overflow-scroll、.overflow-auto的别名
Text wrap
.pre { white-space: pre }
.nowrap { white-space: nowrap }Textareas
.resize-none { resize: none }
.resize-vertical { resize: vertical }
.resize-horizontal { resize: horizontal }Misc
.pointer { cursor: pointer }
.not-allowed { cursor: not-allowed }
.prevent { pointer-events: none }
.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none }whitespace 内补外补
提供内补和外补，粒度为 1rem 和 10px
内补
以 1rem 为粒度
.p0 { padding: 0 }
.p1 { padding: 1rem }
...
.p5 { padding: 5rem }
/*
pt => padding-top
pr => padding-right
pb => padding-bottom
pl => padding-left
*/
.pt0 { padding-top: 0 }
.pt1 { padding-top: 1rem }
...
.pt5 { padding-top: 5rem }
/*
ptb => padding-top & padding-bottom
plr => padding-right & padding-left
*/
.ptb0 { padding-top: 0; padding-bottom: 0 }
.ptb1 { padding-top: 1rem; padding-bottom: 1rem }
...
.ptb5 { padding-top: 5rem; padding-bottom: 5rem }以 10px 为粒度
.p10 { padding: 10px }
...
.p50 { padding: 50px }
/*
pt => padding-top
pr => padding-right
pb => padding-bottom
pl => padding-left
*/
.pt10 { padding-top: 10px }
...
.pt50 { padding-top: 50px }
/*
ptb => padding-top & padding-bottom
plr => padding-right & padding-left
*/
.ptb10 { padding-top: 10px; padding-bottom: 10px }
...
.ptb50 { padding-top: 50px; padding-bottom: 50px }额外提供 5px 和 15px
.ph { padding: 5px }
.p15 { padding: 15px }
.p25 { padding: 25px }
.pth { padding-top: 5px }
.pt15 { padding-top: 15px }
.pt25 { padding-top: 25px }
.prh { padding-right: 5px }
.pr15 { padding-right: 15px }
.pr25 { padding-right: 25px }
.pbh { padding-bottom: 5px }
.pb15 { padding-bottom: 15px }
.pb25 { padding-bottom: 25px }
.plh { padding-left: 5px }
.pl15 { padding-left: 15px }
.pl25 { padding-left: 25px }
.ptbh { padding-top: 5px; padding-bottom: 5px }
.ptb15 { padding-top: 15px; padding-bottom: 15px }
.ptb25 { padding-top: 25px; padding-bottom: 25px }
.plh { padding-left: 5px; padding-right: 5px }
.pl15 { padding-left: 15px; padding-right: 15px }
.pl25 { padding-left: 25px; padding-right: 25px }外补
外补命名同内补风格一致，类名前缀为 m