项目作者: maskzh

项目描述 :
A CSS Toolkit 一套样式工具集。Please use tailwindcss instead.👉
高级语言: CSS
项目地址: git://github.com/maskzh/css-kit.git
创建时间: 2016-01-22T02:19:27Z
项目社区:https://github.com/maskzh/css-kit

开源协议:

下载


css 工具箱 npm version

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

  • 无 reset 样式
  • 无基础(h1-6、table 等)样式
  • 仅包含工具类

安装

  1. npm i css-kit --save

使用

  1. 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-styleborder-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 文字色,背景色,边框色

提供文字颜色、背景颜色、边框颜色支持的颜色

  1. primary = #337ab7
  2. success = #5cb85c
  3. info = #5bc0de
  4. warning = #f0ad4e
  5. danger = #d9534f
  6. white = #fff
  7. silver = #F4F4F4
  8. lightgrey = #ececec
  9. grey = #ccc
  10. midgrey = #777
  11. darkgrey = #444
  12. black = #222
  13. trueblack = #000

文字颜色、背景颜色、边框颜色,分别使用 color-xxxbg-xxxborder-xxx(eg. color-success、bg-white、border-black)

提供 text-xxx 作为 color-xxx 的别名

额外提供如下颜色类名

  1. .c0 { color: #000 }
  2. .c1 { color: #111 }
  3. .c2 { color: #222 }
  4. .c3 { color: #333 }
  5. .c4 { color: #444 }
  6. .c5 { color: #555 }
  7. .c6 { color: #666 }
  8. .c7 { color: #777 }
  9. .c8 { color: #888 }
  10. .c9 { color: #999 }
  11. .ca { color: #aaa }
  12. .cb { color: #bbb }
  13. .cc { color: #ccc }
  14. .cd { color: #ddd }
  15. .ce { color: #eee }
  16. .cf { color: #fff }

depth zIndex 层级

  1. .depth0 { z-index: -1 }
  2. .depth1 { z-index: 1000 }
  3. .depth2 { z-index: 2000 }
  4. .depth3 { z-index: 3000 }
  5. .depth4 { z-index: 4000 }
  6. .depth5 { z-index: 5000 }
  7. .depth6 { z-index: 6000 }
  8. .depth7 { z-index: 7000 }
  9. .depth8 { z-index: 8000 }
  10. .depth9 { z-index: 9000 }
  11. .depth10 { z-index: 10000 }

flex 栅格布局,基于 flex

Flex 容器

  1. .column {
  2. display: flex;
  3. flex-direction: column;
  4. flex: 1 1 auto;
  5. height: auto;
  6. flex-wrap: nowrap;
  7. }
  8. .row {
  9. display: flex;
  10. flex: 1 1 auto;
  11. height: auto;
  12. flex-direction: row;
  13. flex-wrap: wrap;
  14. }

Flex Items 定位

  1. .center { align-items: center; justify-content: center }
  2. .top-left { align-items: flex-start; justify-content: flex-start }
  3. .bottom-right { align-items: flex-end; justify-content: flex-end }
  4. .column.top-center { align-items: center; justify-content: flex-start }
  5. .column.top-right { align-items: flex-end; justify-content: flex-start }
  6. .column.center-left { align-items: flex-start; justify-content: center }
  7. .column.center-right { align-items: flex-end; justify-content: center }
  8. .column.bottom-left { align-items: flex-start; justify-content: flex-end }
  9. .column.bottom-center { align-items: center; justify-content: flex-end }
  10. .row.top-center { align-items: flex-start; justify-content: center }
  11. .row.top-right { align-items: flex-start; justify-content: flex-end }
  12. .row.center-left { align-items: center; justify-content: flex-start }
  13. .row.center-right { align-items: center; justify-content: flex-end }
  14. .row.bottom-left { align-items: flex-end; justify-content: flex-start }
  15. .row.bottom-center { align-items: flex-end; justify-content: center }

Flex Items 对齐

  1. .space-around { justify-content: space-around }
  2. .space-between { justify-content: space-between }
  3. .align-top { align-items: flex-start }
  4. .align-middle { align-items: middle }
  5. .align-baseline { align-items: baseline }
  6. .align-stretch { align-items: stretch }

Flex Order

  1. .order1 { order: 1 }
  2. .order2 { order: 2 }
  3. .order3 { order: 3 }
  4. .order4 { order: 4 }
  5. .order5 { order: 5 }
  6. .order6 { order: 6 }
  7. .order7 { order: 7 }
  8. .order8 { order: 8 }
  9. .order9 { order: 9 }
  10. .order10 { order: 10 }

Flex Size

  1. .flex1 { flex: 1 }
  2. .flex2 { flex: 2 }
  3. .flex3 { flex: 3 }
  4. .flex4 { flex: 4 }
  5. .flex5 { flex: 5 }

grid 栅格布局,基于 float

同 bootstrap 分为 12 栅格,从 .col-1.col-12
也同时提供 .col-pull-x.col-push-x.col-offset-x 系列类名

images 图片,背景图相关

背景图

  1. .bg-no-repeat { background-repeat: no-repeat }
  2. .bg-cover { background-size: cover }
  3. .bg-contain { background-size: contain }
  4. .bg-center { background-position: center }
  5. .bg-top { background-position: top }
  6. .bg-right { background-position: right }
  7. .bg-bottom { background-position: bottom }
  8. .bg-left { background-position: left }
  9. .bg-fixed { background-attachment: fixed }
  10. .bg-local { background-attachment: local }

<img> 图片

  1. .img-cover { object-fit: cover }
  2. .img-contain { object-fit: contain }
  3. .img-fill { object-fit: fill }
  4. .img-scale-down { object-fit: scale-down }

positioning 定位,浮动

定位

  1. .relative { position: relative }
  2. .absolute { position: absolute }
  3. .fixed { position: fixed }
  4. .top { top: 0 }
  5. .right { right: 0 }
  6. .bottom { bottom: 0 }
  7. .left { left: 0 }

浮动

  1. .float-left { float: left }
  2. .float-right { float: right }
  3. /*清楚浮动*/
  4. .clearfix:before, .clearfix:after {
  5. display: table;
  6. content: ' '
  7. }
  8. .clearfix:after { clear: both }

提供 .pull-left.pull-right 以及 .fl.fr 作为 .float-left.float-right 的别名

sizing 宽高

  1. .w-auto { width: auto !important }
  2. .w-inherit { width: inherit !important }
  3. .w-initial { width: initial !important }

提供以 5 为粒度,单位分别为 vw% 的一系列类名如下

  1. .vw5 { width: 5vw }
  2. .vw10 { width: 10vw }
  3. ...
  4. .vw100 { width: 100vw }
  5. .w5 { width: 5% }
  6. .w10 { width: 10% }
  7. ...
  8. .w100 { width: 100% }

  1. .h-auto { height: auto !important }
  2. .h-inherit { height: inherit !important }
  3. .h-initial { height: initial !important }

同样提供以 5 为粒度,单位分别为 vh% 的一系列类名如下

  1. .vh5 { height: 5vh }
  2. .vh10 { height: 10vh }
  3. ...
  4. .vh100 { height: 100vh }
  5. .h5 { height: 5% }
  6. .h10 { height: 10% }
  7. ...
  8. .w100 { height: 100% }

并额外提供几个最小高度的类名

  1. .mh100 { min-height: 100px }
  2. .mh200 { min-height: 200px }
  3. .mh300 { min-height: 300px }
  4. .mh400 { min-height: 400px }
  5. .mh500 { min-height: 500px }

typography 排版相关

文本对齐

  1. .text-center { text-align: center }
  2. .text-left { text-align: left }
  3. .text-right { text-align: right }

.tc.tl.tr 分别作为 .text-center.text-left.text-right 的别名

行高

  1. .lh1 { line-height: 1.1 }
  2. .lh2 { line-height: 1.2 }
  3. .lh3 { line-height: 1.3 }
  4. .lh4 { line-height: 1.4 }
  5. .lh5 { line-height: 1.5 }
  6. .lh6 { line-height: 1.6 }
  7. .lh7 { line-height: 1.7 }
  8. .lh8 { line-height: 1.8 }
  9. .lh9 { line-height: 1.9 }
  10. .lh-1 { line-height: 1 }
  11. .lh-2 { line-height: 2 }
  12. .lh-3 { line-height: 3 }

字体大小

  1. .fs-xx-small { font-size: xx-small }
  2. .fs-x-small { font-size: x-small }
  3. .fs-small { font-size: small }
  4. .fs-medium { font-size: medium }
  5. .fs-large { font-size: large }
  6. .fs-x-large { font-size: x-large }
  7. .fs-xx-large { font-size: xx-large }
  8. .fs-smaller { font-size: smaller }
  9. .fs-larger { font-size: larger }
  10. .fs12 { font-size: 12px }
  11. .fs13 { font-size: 13px }
  12. .fs14 { font-size: 14px }
  13. .fs15 { font-size: 15px }
  14. .fs16 { font-size: 16px }
  15. ...
  16. .fs47 { font-size: 47px }
  17. .fs48 { font-size: 48px }

其他字体样式

  1. /*文字溢出隐藏*/
  2. .cut {
  3. text-overflow: ellipsis;
  4. overflow: hidden;
  5. white-space: nowrap;
  6. max-width: 70ch;
  7. }
  8. .uppercase { text-transform: uppercase }
  9. .lowercase { text-transform: lowercase }
  10. .capitalize { text-transform: capitalize }
  11. .italic { font-style: italic }
  12. .tracked { letter-spacing: 4px }
  13. .underline { text-decoration: underline }
  14. .no-underline { text-decoration: none }
  15. .list-style-none { list-style-type: none }
  16. .thin { font-weight: 200 }
  17. .regular { font-weight: 400 }
  18. .bold { font-weight: 700 }

utilities 显示隐藏滚动等工具类

display

  1. .hidden { display: none }
  2. .hide { display: none }
  3. .none { display: none }
  4. .block { display: block }
  5. .inline { display: inline }
  6. .inline-block { display: inline-block }
  7. .flex { display: flex }
  8. .inline-flex { display: inline-flex }

同时 .db.dib.di 作为 .block.inline.inline-block 的别名

overflow & Scrolling

  1. .overflow-hidden { overflow: hidden }
  2. .overflow-scroll { overflow: scroll }
  3. .overflow-auto { overflow: auto }
  4. .scroll-x {
  5. overflow-x: scroll
  6. overflow-y: hidden
  7. }
  8. .scroll-y {
  9. overflow-x: hidden
  10. overflow-y: scroll
  11. }
  12. .no-scrollbar::-webkit-scrollbar {
  13. width: 0px
  14. height: 0px
  15. background: transparent
  16. }

同时 .ofh.ofs.ofa 作为 .overflow-hidden.overflow-scroll.overflow-auto 的别名

Text wrap

  1. .pre { white-space: pre }
  2. .nowrap { white-space: nowrap }

Textareas

  1. .resize-none { resize: none }
  2. .resize-vertical { resize: vertical }
  3. .resize-horizontal { resize: horizontal }

Misc

  1. .pointer { cursor: pointer }
  2. .not-allowed { cursor: not-allowed }
  3. .prevent { pointer-events: none }
  4. .disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none }

whitespace 内补外补

提供内补和外补,粒度为 1rem10px

内补

1rem 为粒度
  1. .p0 { padding: 0 }
  2. .p1 { padding: 1rem }
  3. ...
  4. .p5 { padding: 5rem }
  5. /*
  6. pt => padding-top
  7. pr => padding-right
  8. pb => padding-bottom
  9. pl => padding-left
  10. */
  11. .pt0 { padding-top: 0 }
  12. .pt1 { padding-top: 1rem }
  13. ...
  14. .pt5 { padding-top: 5rem }
  15. /*
  16. ptb => padding-top & padding-bottom
  17. plr => padding-right & padding-left
  18. */
  19. .ptb0 { padding-top: 0; padding-bottom: 0 }
  20. .ptb1 { padding-top: 1rem; padding-bottom: 1rem }
  21. ...
  22. .ptb5 { padding-top: 5rem; padding-bottom: 5rem }
10px 为粒度
  1. .p10 { padding: 10px }
  2. ...
  3. .p50 { padding: 50px }
  4. /*
  5. pt => padding-top
  6. pr => padding-right
  7. pb => padding-bottom
  8. pl => padding-left
  9. */
  10. .pt10 { padding-top: 10px }
  11. ...
  12. .pt50 { padding-top: 50px }
  13. /*
  14. ptb => padding-top & padding-bottom
  15. plr => padding-right & padding-left
  16. */
  17. .ptb10 { padding-top: 10px; padding-bottom: 10px }
  18. ...
  19. .ptb50 { padding-top: 50px; padding-bottom: 50px }
额外提供 5px15px
  1. .ph { padding: 5px }
  2. .p15 { padding: 15px }
  3. .p25 { padding: 25px }
  4. .pth { padding-top: 5px }
  5. .pt15 { padding-top: 15px }
  6. .pt25 { padding-top: 25px }
  7. .prh { padding-right: 5px }
  8. .pr15 { padding-right: 15px }
  9. .pr25 { padding-right: 25px }
  10. .pbh { padding-bottom: 5px }
  11. .pb15 { padding-bottom: 15px }
  12. .pb25 { padding-bottom: 25px }
  13. .plh { padding-left: 5px }
  14. .pl15 { padding-left: 15px }
  15. .pl25 { padding-left: 25px }
  16. .ptbh { padding-top: 5px; padding-bottom: 5px }
  17. .ptb15 { padding-top: 15px; padding-bottom: 15px }
  18. .ptb25 { padding-top: 25px; padding-bottom: 25px }
  19. .plh { padding-left: 5px; padding-right: 5px }
  20. .pl15 { padding-left: 15px; padding-right: 15px }
  21. .pl25 { padding-left: 25px; padding-right: 25px }

外补

外补命名同内补风格一致,类名前缀为 m