1.0.11 • Published 4 years ago
zens-ui v1.0.11
ZensUI
本框架海量参考了CMUI的代码,向CMUI的开发者致敬
ZensUI
为前端开发者提供了一个易上手的、语义化的、高兼容性的前端UI框架。致力于帮助开发者可以快速构建自己的web应用。同时ZensUI
也是跨平台的,目前支持的平台有:
- 移动端web
- PC端web
- 微信小程序
快速上手
安装
npm install --save-dev zens-ui
引入scss样式
import 'zens-ui/scss/ZensUI.scss'
使用说明
基础示例
如果你想创建一个红色的、圆角 按钮,你可以像下面这样写代码:
<button class="btn red radius">my button</button>
它会被渲染成下面的样子:
就像你看到一样,其中.btn
是来描述当前是一个什么元素,而.red
和.radius
作为"修饰符",来描述当前元素长什么样子。
更多的按钮用法:
<button class="btn">Basic button</button>
<button class="btn gray pill">Gray pills like button</button>
<button class="btn big hollow red radius">Big hollow round button</button>
<button class="btn black small">Small black button</button>
其他示例
Zens UI
封装了几个container
类,他们是为了快速实现布局而设计的。
img-container
:图像容器flex-container
:flex布局容器flex-row-container
:flex布局容器(纵向排列)img-container
的用法如下:
它会被渲染成下面的样子:<div class="img-container round" style="width: 100px; height: 100px;"> <img src="https://via.placeholder.com/100x100" alt=""> </div>
npm包中的目录结构
其中ZensUI.css
用于通用的web开发,而ZensUI.mp.css
用于微信小程序的开发
ZensUI/
├─ dist/
│ └── css/
│ ├─ZensUI.css
│ ├─ZensUI.css.map
│ ├─ZensUI.min.css
│ ├─ZensUI.min.css.map
│ ├─ZensUI.mp.css
│ ├─ZensUI.mp.css.map
│ ├─ZensUI.mp.min.css
│ └─ZensUI.mp.min.css.map
└─ scss/
└─ZensUI.scss
License
Everything is MIT