概述

大部分代码基于ColorUI 修改而来，ColorUI目前只针对微信小程序，本项目ColorUICss时非常纯粹的移动端CSS。 ColorUICss专注于移动端Css框架。初衷主要是要一个纯粹的移动端CSS框架，由于多用于VUE框架中，基于VUE的框架也有很多优秀的，但往往我只需要其中一个组件，这个时候个项目就会显得很杂乱，于是就写个纯粹的CSS。

交流QQ群：837450231

感谢ColorUI 作者，很喜欢这样的色彩搭配。

手机演示

演示安装

git clone https://gitee.com/anyhome/ColorUI.git
cd ColorUI 
npm install
npm run serve

浏览地址 http://localhost:9003/colorui/

基础

布局
背景
文本
图标
按钮
标签
头像
进度条
边框阴影
加载

组件

操作条
导航栏
列表
卡片
输入框 6.复选框 7.单选框 8.开关
时间轴
聊天
轮播
模态框
步骤条

概述

ColorUICss专注于移动端Css框架，主要用于在VUE框架中弥补某些小功能、小组件的不足之处，ColorUICss只是一个纯粹的移动端CSS。多处采用 tien- 作为命名空间而不是所有地方，是为了再不影响其他css命名冲突的前提下，一些常用的组件又不至于书写麻烦。组件的命名空间后期可能还会继续更新。

布局

固定尺寸

采用flex弹性布局，安装宽带百分比显示，例如显示20%宽度。

<div class="flex flex-wrap">
	<div class='flex-20 bg-grey margin-xs padding-sm radius'>xs(20%)</div>
	<div class='flex-40'></div>
</div>

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-20 {
  flex-basis: 20%;
}


.flex-40 {
  flex-basis: 40%;
}
.flex-50 {
  flex-basis: 50%;
}
.flex-60 {
  flex-basis: 60%;
}
.flex-80 {
  flex-basis: 80%;
}

比例布局

      <div class="flex">
        <div class='flex-sub bg-grey padding-sm margin-xs radius'>1</div>
        <div class='flex-sub bg-grey padding-sm margin-xs radius'>1</div>
      </div>
      <div class="flex margin-bottom-sm mb-sm">
        <div class='flex-sub bg-grey padding-sm margin-xs radius'>1</div>
        <div class='flex-twice bg-grey padding-sm margin-xs radius'>2</div>
      </div>
      <div class="flex  margin-bottom-sm mb-sm">
        <div class='flex-1 bg-grey padding-sm margin-xs radius'>1</div>
        <div class='flex-2 bg-grey padding-sm margin-xs radius'>2</div>
        <div class='flex-3 bg-grey padding-sm margin-xs radius'>3</div>
      </div>

.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}

水平对齐 justify

<div class="flex justify-start">
  <div >start</div>
  <div >start</div>
</div>
<div class="flex justify-end">
  <div >end</div>
  <div >end</div>
</div>
<div class="flex justify-center">
  <div >center</div>
  <div >center</div>
</div>
<div class="flex justify-between">
  <div >between</div>
  <div >between</div>
</div>
<div class="flex justify-around">
  <div >around</div>
  <div >around</div>
</div>

.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

垂直对齐 align

<div class="flex  align-start">
  <div >ColorUi</div>
  <div >start</div>
</div>
<div class="flex  align-end">
  <div >ColorUi</div>
  <div >end</div>
</div>
<div class="flex  align-center">
  <div >ColorUi</div>
  <div >center</div>
</div>

.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.align-center {
align-items: center;
}
.align-stretch {
align-items: stretch;
}
.align-stretch {
align-items: stretch;
}

Grid布局

整个分10列，和我们通常使用的btcss还不太一样，比如

<div class="margin-bottom text-center grid col-4">
  <div class=" padding tien-col ">1</div>
  <div class=" padding tien-col ">2</div>
  <div class=" padding tien-col ">3</div>
  <div class=" padding tien-col ">4</div>
</div>

<div class="margin-bottom text-center grid col-5">
  <div class=" padding tien-col ">1</div>
  <div class=" padding tien-col ">2</div>
  <div class=" padding tien-col ">3</div>
  <div class=" padding tien-col ">4</div>
  <div class=" padding tien-col ">5</div>
  <div class=" padding tien-col ">6</div>
  <div class=" padding tien-col ">7</div>
  <div class=" padding tien-col ">8</div>
  <div class=" padding tien-col ">9</div>
  <div class=" padding tien-col ">10</div>
</div>

当我们要实现4列布局时，需要加外层 grid col-4,自动将内层tien-col等分。

等高

<div class="grid col-4 grid-square">
</div>

.grid.grid-square {
  overflow: hidden;
}

辅助布局

边距

margin-no 所有外边距为 0px

margin-5 所有外边距为5px，其他还有 margin-10、margin-15、margin-20、margin-25

margin-top-no 外上边距为 0 px，其他还有 margin-top-5、margin-top-10、margin-top-15、margin-top-20、margin-top-25

类似的还有左边距 margin-left、右边距margin-right、下边距margin-bottom。内边距以此类推。如 padding-no、padding-5、padding-10

默认margin、padding 为 15px;

<div class="bg-white">
      <div class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">外边距</div>
        <div class="basis-df padding-bottom-xs">内边距</div>
        <div class="basis-df">.margin-{size}</div>
        <div class="basis-df">.padding-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">水平方向外边距</div>
        <div class="basis-df padding-bottom-xs">水平方向内边距</div>
        <div class="basis-df">.margin-lr-{size}</div>
        <div class="basis-df">.padding-lr-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">垂直方向外边距</div>
        <div class="basis-df padding-bottom-xs">垂直方向内边距</div>
        <div class="basis-df">.margin-tb-{size}</div>
        <div class="basis-df">.padding-tb-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">上外边距</div>
        <div class="basis-df padding-bottom-xs">上内边距</div>
        <div class="basis-df">.margin-top-{size}</div>
        <div class="basis-df">.padding-top-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">右外边距</div>
        <div class="basis-df padding-bottom-xs">右内边距</div>
        <div class="basis-df">.margin-right-{size}</div>
        <div class="basis-df">.padding-right-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">下外边距</div>
        <div class="basis-df padding-bottom-xs">下内边距</div>
        <div class="basis-df">margin-bottom-{size}</div>
        <div class="basis-df">.padding-bottom-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">左外边距</div>
        <div class="basis-df padding-bottom-xs">左内边距</div>
        <div class="basis-df">.margin-left-{size}</div>
        <div class="basis-df">.padding-left-{size}</div>
      </div>
    </div>

圆角和浮动

//默认圆角
.radius {
  border-radius: 3px;
}
//宽度100%
.response {
  width: 100%;
}

/* -- 浮动 --  */
.cf::after, .cf::before,.clear::after, .clear::before {
  content: " ";
  display: table;
}
.cf::after,.clear::after {
  clear: both;
}
.fl {
  float: left;
}
.fr {
  float: right;
}

背景

背景以bg-前缀，例如红色背景bg-red，其他还有.bg-red、.bg-orange、.bg-yellow、.bg-olive、.bg-green、.bg-cyan、.bg-blue、.bg-purple、.bg-mauve、.bg-pink、.bg-brown、.bg-grey、.bg-gray、.bg-black、.bg-white。加上 .light 则是相对应的浅色背景

渐变背景

<div>
  <div class='bg-gradual-red  shadow-blur'>
    <div class="text-lg">魅红</div>
    <div class='margin-top-sm text-Abc'>#f43f3b - #ec008c</div>
  </div>
</div>
<div>
  <div class='bg-gradual-orange  shadow-blur'>
    <div class="text-lg">鎏金</div>
    <div class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</div>
  </div>
</div>
<div>
  <div class='bg-gradual-green  shadow-blur'>
    <div class="text-lg">翠柳</div>
    <div class='margin-top-sm text-Abc'>#39b54a - #8dc63f</div>
  </div>
</div>
<div>
  <div class='bg-gradual-blue  shadow-blur'>
    <div class="text-lg">靛青</div>
    <div class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</div>
  </div>
</div>
<div>
  <div class='bg-gradual-purple  shadow-blur'>
    <div class="text-lg">惑紫</div>
    <div class='margin-top-sm text-Abc'>#9000ff - #5e00ff</div>
  </div>
</div>
<div class=-sm'>
  <div class='bg-gradual-pink  shadow-blur'>
    <div class="text-lg">霞彩</div>
    <div class='margin-top-sm text-Abc'>#ec008c - #6739b6</div>
  </div>
</div>

文本

文字大小

.text-10 {
  font-size: 10px;
}
.text-12 {
  font-size: 12px;
}
.text-14 {
  font-size: 14px;
}
.text-16 {
  font-size: 16px;
}
.text-18 {
  font-size: 18px;
}
.text-22 {
  font-size: 22px;
}
.text-40 {
  font-size: 40px;
}
.text-60 {
  font-size: 60px;
}
//首字母大写
.text-Abc {
  text-transform: Capitalize;
}
//字母全部大写
.text-ABC {
  text-transform: Uppercase;
}
//字母全部小写
.text-abc {
  text-transform: Lowercase;
}
//字符截断
.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
//粗体
.text-bold {
  font-weight: bold;
}

文字对齐

//居中
.text-center {
  text-align: center;
}
//行高
.text-content {
  line-height: 1.6;
}
//左对齐
.text-left {
  text-align: left;
}
//右对齐
.text-right {
  text-align: right;
}

文字颜色

.text-red, .line-red, .lines-red {
  color: #e54d42;
}
.text-orange, .line-orange, .lines-orange {
  color: #f37b1d;
}
.text-yellow, .line-yellow, .lines-yellow {
  color: #fbbd08;
}
.text-olive, .line-olive, .lines-olive {
  color: #8dc63f;
}
.text-green, .line-green, .lines-green {
  color: #39b54a;
}
.text-cyan, .line-cyan, .lines-cyan {
  color: #1cbbb4;
}
.text-blue, .line-blue, .lines-blue {
  color: #0081ff;
}
.text-purple, .line-purple, .lines-purple {
  color: #6739b6;
}
.text-mauve, .line-mauve, .lines-mauve {
  color: #9c26b0;
}
.text-pink, .line-pink, .lines-pink {
  color: #e03997;
}
.text-brown, .line-brown, .lines-brown {
  color: #a5673f;
}
.text-grey, .line-grey, .lines-grey {
  color: #8799a3;
}
.text-gray, .line-gray, .lines-gray {
  color: #aaa;
}
.text-black, .line-black, .lines-black {
  color: #333;
}
.text-white, .line-white, .lines-white {
  color: #fff;
}

图标

图标使用阿里云 iconfont图标，为不和自己的图标冲突使用tien-前缀，例如 .tien-icon-fork

[class*="tien-icon-"] {
  font-family: "iconfont" !important;
  font-size: inherit;
  font-style: normal;
}

按钮

形状、尺寸、颜色

颜色请参考背景颜色

<button class="tien-btn">默认</button>
<button class="tien-btn round">圆角</button>
<button class="tien-btn icon">
	<span class='tien-icon-emojifill'>图标</span>
</button>

<button class='tien-btn round sm'>小尺寸</button>
<button class='tien-btn round'>默认</button>
<button class='tien-btn round lg'>大尺寸</button>

镂空按钮只需要加 .line-[背景色],块状按钮加 .lg

<div class="tien-capsule">
  <div class='tien-tag bg-red'>
    <span class='tien-icon-likefill'></span>
  </div>
  <div class="tien-tag line-red">
    12
  </div>
</div>
<div class="tien-capsule round">
  <div class='tien-tag bg-blue '>
    <span class='tien-icon-likefill'></span>
  </div>
  <div class="tien-tag line-blue">
    23
  </div>
</div>
<div class="tien-capsule round">
  <div class='tien-tag bg-blue '>
    说明
  </div>
  <div class="tien-tag line-blue">
    123
  </div>
</div>
<div class="tien-capsule radius">
  <div class='tien-tag bg-grey '>
    <span class='tien-icon-likefill'></span>
  </div>
  <div class="tien-tag line-grey">
    23
  </div>
</div>
<div class="tien-capsule radius">
  <div class='tien-tag bg-brown sm'>
    <span class='tien-icon-likefill'></span>
  </div>
  <div class="tien-tag line-brown sm">
    23
  </div>
</div>

如果本项目对您有帮助请给我点动力^_^

支付宝

ayhome / ColorUICss

基础

组件

概述

布局

固定尺寸

比例布局

Grid布局

辅助布局

背景

文本

图标

按钮

标签

简介

发行版

贡献者

近期动态

ayhome / ColorUICss .gitee-modal { width: 500px !important; }

基础

组件

概述

布局

固定尺寸

比例布局

Grid布局

辅助布局

背景

文本

图标

按钮

标签

简介

发行版

贡献者

近期动态

搜索帮助

ayhome / ColorUICss