mine-tinycss v1.0.0

mine-tinycss

一个关于原子化的 CSS 预设

特性

• 极简原子化
• 单位 px 重置样式, PC 端
• 单位 px 重置样式, H5 端
• 单位 rpx 重置样式，小程序，uni-app 端
• 单位 rem 重置样式，H5 端

安装

npm i mine-tinycss

使用

// PC 端使用, 单位 px
import 'mine-tinycss'

// H5 端使用, 单位 px
import 'mine-tinycss/mpx'

// 小程序、uni-app 端使用, 单位 rpx
import 'mine-tinycss/rpx'

// H5 端使用, 单位 rem
import 'mine-tinycss/rem'

• HTML 使用类名

<div class="w-40">演示</div>

类名文件

• 👉 px
• 👉 mpx
• 👉 rpx

运行项目

克隆项目

git clone https://github.com/biaov/mine-tinycss.git --depth=1

安装依赖

• 项目根目录安装项目依赖

npm i

启动项目

npm start

打包项目

• 打包样式库

npm run build

技术栈

• Vite + Vue3.x + Less + NodeJs

目录解析

├── mine-tinycss ------------------------------------- 样式库名称
│    ├── .github --------------------------------- Github Actions 工作流
│    ├── .vscode --------------------------------- VSCode 配置
│    ├── demo ------------------------------------ 演示目录
│    ├── dist ------------------------------------ 打包目录
│    ├── node_modules ---------------------------- 依赖目录
│    ├── src ------------------------------------- 样式主程序
│    │    ├── common ----------------------------- 统一的
│    │    └── input ------------------------------ 各种样式
│    ├── .editorconfig --------------------------- 编辑器配置
│    ├── .gitignore ------------------------------ Git 忽略文件
│    ├── .ncurc.json ----------------------------- NCU 配置
│    ├── .npmignore ------------------------------ NPM 忽略文件
│    ├── .prettierignore ------------------------- Prettier 忽略文件
│    ├── .prettierrc ----------------------------- Prettier 配置文件
│    ├── index.html ------------------------------ 演示入口文件
│    ├── LICENSE --------------------------------- 授权协议
│    ├── package-lock.json ----------------------- 依赖包版本锁定文件
│    ├── package.json ---------------------------- 依赖包配置文件
│    ├── README.md ------------------------------- 项目文档
└    └── vite.config.js -------------------------- Vite 配置

依赖解析

devDependencies

• @vitejs/plugin-vue: 解析 vue 文件插件
• autoprefixer: css 浏览器前缀
• postcss: js 插件转换 css 样式工具
• postcss-pxtorem: px 转 rem 工具
• prettier: 格式化工具
• vite: 自动化构建工具

optionalDependencies

• @rollup/rollup-linux-x64-gnu: 支持 Linux 环境运行 Rollup

贡献者们