kucss

常用的样式以及一些公用的class名

特征

• 拆分公用的样式，不用重复开发
• 直接使用class名，方便快捷
• 不用在为命令class名而烦恼
• 快速开发页面样式
• 默认使用 normalize

安装

// NPM
npm install kucss

// yarn
yarn add kucss

// PNPM
pnpm install kucss

使用

根据像素单位，不同的像素单位使用相对的像素样式

• px

   import 'kucss/src/index.css'

• rpx 小程序

  import '/kucss/index.wxss'
  // 或者
  import '/miniprogram_npm/kucss/index.wxss'

• rpx uniapp

  import 'kucss/src/rpx.css'

样式类型

• Font 字体

  class名	类型	大小
  font-12	font-size	12px
  font-14	font-size	14px
  font-16	font-size	16px
  font-18	font-size	18px
  font-20	font-size	20px
  font-22	font-size	22px
  font-24	font-size	24px
  font-28	font-size	28px
  font-bold	font-weight	bold

• Color 颜色

  class名	类型	颜色
  c-red	红色	#f4364c
  c-blue	蓝色	#409eff
  c-yellow	黄色	#ffb14d
  c-green	绿色	#66bf4b
  c-gray	灰色	#97a8be
  c-white	白色	#ffffff
  color-33	#333333	#333333
  color-66	#666666	#666666
  color-99	#999999	#999999

• BackgroundColor 背景颜色

  class名	类型	颜色
  bg-red	红色	#f4364c
  bg-blue	蓝色	#409eff
  bg-yellow	黄色	#ffb14d
  bg-green	绿色	#66bf4b
  bg-gray	灰色	#97a8be
  bg-white	白色	#ffffff

• margin 外边距

  class名	类型	大小
  mt5, mt10, mt15, mt20, mt25, mt30	margin-top	5px, 10px, 15px, 20px, 25px, 30px
  mt35, mt40, mt45, mt50, mt55, mt60	margin-top	35px, 40px, 45px, 50px, 55px, 60px
  mr5, mr10, mr15, mr20, mr25, mt30	margin-right	5px, 10px, 15px, 20px, 25px, 30px
  mr35, mr40, mr45, mr50, mr55, mr60	margin-right	35px, 40px, 45px, 50px, 55px, 60px
  mb5, mb10, mb15, mb20, mb25, mb30	margin-bottom	5px, 10px, 15px, 20px, 25px, 30px
  mb35, mb40, mb45, mb50, mb55, mb60	margin-bottom	35px, 40px, 45px, 50px, 55px, 60px
  ml5, ml10, ml15, ml20, ml25, ml30	margin-left	5px, 10px, 15px, 20px, 25px, 30px
  ml35, ml40, ml45, ml50, ml55, ml60	margin-left	35px, 40px, 45px, 50px, 55px, 60px

• padding 内边距

  class名	类型	大小
  pt5, pt10, pt15, pt20, pt25, pt30	padding-top	5px, 10px, 15px, 20px, 25px, 30px
  pt35, pt40, pt45, pt50, pt55, pt60	padding-top	35px, 40px, 45px, 50px, 55px, 60px
  pr5, pr10, pr15, pr20, pr25, pr30	padding-right	5px, 10px, 15px, 20px, 25px, 30px
  pr35, pr40, pr45, pr50, pr55, pr60	padding-right	35px, 40px, 45px, 50px, 55px, 60px
  pb5, pb10, pb15, pb20, pb25, pb30	padding-bottom	5px, 10px, 15px, 20px, 25px, 30px
  pb35, pb40, pb45, pb50, pb55, pb60	padding-bottom	35px, 40px, 45px, 50px, 55px, 60px
  pl5, pl10, pl15, pl20, pl25, pl30	padding-left	5px, 10px, 15px, 20px, 25px, 30px
  pl35, pl40, pl45, pl50, pl55, pl60	padding-left	35px, 40px, 45px, 50px, 55px, 60px

• padding 其他内边距

  class名	类型	大小
  p5, p10, p15, p20, p25, p30, p35, p40, p45, p50, p55, p60	padding	5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px, 60px

• padding margin 上下左右部分边距

  class名	类型	大小
  plr5, plr10, plr15, plr20, plr25, plr30, ... , plr60	padding-left;padding-right	5px, 10px, 15px, 20px, 25px, 30px, 5px, 40px, 45px, 50px, 60px
  ptb5, ptb10, ptb15, ptb20, ptb25, ptb30, ... , ptb60	padding-top;padding-bottom	5px, 10px, 15px, 20px, 25px, 30px, 5px, 40px, 45px, 50px, 60px
  mlr5, mlr10, mlr15, mlr20, mlr25, mlr30, ... , mlr60	margin-left;margin-right	5px, 10px, 15px, 20px, 25px, 30px, 5px, 40px, 45px, 50px, 60px
  mtb5, mtb10, mtb15, mtb20, mtb25, mtb30, ..., mtb60	margin-top;margin-bottom	5px, 10px, 15px, 20px, 25px, 30px, 5px, 40px, 45px, 50px, 60px

• Width 宽度

  class名	类型	大小
  width-60	width	60px
  width-80	width	80px
  width-100	width	100px
  width-120	width	120px
  width-140	width	140px
  width-160	width	160px
  width-180	width	180px
  width-200	width	200px
  width-220	width	220px
  width-240	width	240px
  width-260	width	260px
  width-280	width	280px
  width-300	width	300px
  width-320	width	320px
  width-340	width	340px
  width-360	width	360px
  width-380	width	380px
  width-400	width	400px
  width-420	width	420px

• Border 边框

  class名	类型	大小
  border-left	border-left	1px solid #d8dce5
  border-right	border-right	1px solid #d8dce5
  border-top	border-top	1px solid #d8dce5
  border-bottom	border-bottom	1px solid #d8dce5
  border-radius	border-radius	8px
  border	border	1px solid #d8dce5

• Text-decoration 文本修饰

  class名	类型	说明
  line-through	text-decoration: line-through	中划线
  over-line	text-decoration: overline	上划线
  under-line	text-decoration: underline	下划线

• Cursor 鼠标样式

  class名	类型	说明
  pointer	cursor: pointer	光标手指指针
  not-allowed	cursor: not-allowed	禁用样式

• Overflow 文本超出

  class名	类型	说明
  overflow	overflow: hidden	超出隐藏
  overflow-y	overflow-y: auto	设置y轴: auto
  text-overflow		超出显示...

• Text 文本

  class名	类型	说明
  text-left	text-align: left	居左显示
  text-right	text-align: right	居右显示
  text-center	text-align: center	居中显示
  word-wrap	word-wrap: break-word	文字中断换货显示

• Flex

  class名	类型	说明
  flex	display: flex	设置flex
  flex-warp	flex-wrap: wrap	超出换行
  flex-shrink	flex-shrink：0	比例不缩小
  flex1	flex：1	设置全屏
  flex-center		上下左右居中
  flex-align-center		左右居中
  flex-justify-center		上下居中
  flex-around		两侧的间隔相等
  flex-between		两端对齐，项目之间的间隔都相等
  flex-start		上下居中，左右: flex-start
  flex-end		上下居中，左右: flex-end
  flex-column		设置flex方向: column
  flexs-center	flex-decoration: column	多轴方式：上下左右居中
  flexs-justify-center	flex-decoration: column	多轴方式：左右居中
  flexs-align-center	flex-decoration: column	多轴方式：上下居中
  flexs-around	flex-decoration: column	多轴方式：两侧的间隔相等
  flexs-between	flex-decoration: column	多轴方式：两端对齐，项目之间的间隔都相等