css 工具箱

一个用于快速构建 Web 界面的 CSS 工具库

无 reset 样式
无基础（h1-6、table 等）样式
仅包含工具类

安装

npm i css-kit --save

使用

import 'css-kit'

or 使用 lib 下的目录下 toolkit.css or toolkit.min.css 文件

文档

animation
borders
colors
depth
flex
grid
images
positioning
sizing
typography
utilities
whitespace

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、.b3 border-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

Files

README.md

Latest commit

History