simplecss
基于sass编写的css库,依赖normalize.css、fontAwesome,包括主题色号配置、基准字号配置、原子样式(布局、字号、边距)、常用ui组件、动画(加速)、ios兼容
安装
npm
npm install simplecss
全量引用
import 'simplecss/simplecss.scss'
使用说明
1 主题色号配置
variables.scss
// 截取部分代码
$s-main-color: #303133;
$s-content-color: #606266;
$s-tips-color: #909193;
$s-light-color: #c0c4cc;
$s-border-color: #dadbde;
$s-bg-color: #f3f4f6;
$s-disabled-color: #c8c9cc;
...
2 基准字号设置
rem.scss中根据屏幕像素比设置基准字号,同时针对1倍屏且屏幕宽度小于300px
的基准字号设置成14px
/**
* 适配基准字号配置文件 rem.scss
*/
// 正常1倍屏,基准字号是16px
@media screen and (-webkit-max-device-pixel-ratio: 1){
html {
font-size: 16px;
}
}
// 正常2倍屏,基准字号是32px
@media screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 2) {
html {
font-size: 32px;
}
}
// 正常3倍屏及以上,基准字号是48px
@media screen and (-webkit-min-device-pixel-ratio: 2) {
html {
font-size: 48px;
}
}
// 1倍屏且屏幕宽度小于300px,基准字号是14px
@media screen and (max-width: 300px) and (-webkit-max-device-pixel-ratio: 1){
html {
font-size: 14px;
}
}
3 原子样式
- 布局
- 字号
- 边距
- 边框
- 圆角
4 常用ui组件
- 按钮
- 表单
- 顶部导航
- 输入框
- 开关
- 复选/单选框
- 模态
5 网格系统
安装教程
- xxxx
- xxxx
- xxxx
使用说明
- xxxx
- xxxx
- xxxx
参与贡献
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request
特技
- 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
- Gitee 官方博客 blog.gitee.com
- 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
- GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
- Gitee 官方提供的使用手册 https://gitee.com/help
- Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/