详细介绍 | 文档

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