介绍
提供 web 微信小程序 的原子CSS库，拿来即用，可快速搭建前端页面，也可以扩展属于自己的样式库。
- 统一的样式名称
- 内置
normalize.css - 支持自定义选择器
- 支持自定义样式名称
- 支持自定义样式名称连接符
- 支持自定义生成带有数值后缀的样式
- 支持元素响应式可见
gitee
atomic.css
下载atom.css
atom.css
atom.min.css
下载atom.wxss
atom.wxss
atom.min.wxss
使用说明
Position
.pos,
.pos-r {
position: relative; }
.pos-s {
position: static; }
.pos-a {
position: absolute; }
.pos-f {
position: fixed; }
.pos-a-trbl {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.pos-z-0 {
z-index: 0; }
...
.pos-z-100 {
z-index: 100; }
.pos-t-1 {
top: 1px; }
.pos-r-1 {
right: 1px; }
.pos-b-1 {
bottom: 1px; }
.pos-l-1 {
left: 1px; }
Width
.w-a {
width: "auto"; }
.w-1 {
width: 1px; }
.w-1vw {
width: 1vw; }
.w-1pct {
width: 1%; }
Line-height
.lh-i {
line-height: "initial"; }
.lh-nm {
line-height: "normal"; }
.lh-1 {
line-height: 1; }
.lh-0-1 {
line-height: 0.1; }
.lh-1-2 {
line-height: 1.2; }
Color
查看 ant.design
.c-n {
color: "none"; }
.c-tp {
color: "transparent"; }
.c-white {
color: #fff; }
.c-black {
color: black; }
.c-blue {
color: #1890ff; }
.c-blue-1 {
color: #e8f4ff; }
...
.c-blue-10 {
color: #1890ff; }
Responsive
.vis-xs {
display: block !important; }
.vis-sm-b {
display: block !important; }
.hid-lg {
display: none !important; }
自定义扩展
使用 glup
使用 npm 安装 package.json 内的依赖
npm install
$ cd atomic.css
$ gulp
default.scss
修改 default.scss 内的参数，生成自己的样式文件！
// 选择器
$atomic-selector: '#'
=> #pos-r: { position: relative; };
// 公共样式名称前缀
$atomic-prefix: 'my';
=> .my-w-1 { width: 1px; }
// 样式名称连接符
$atomic-connector: '_';
=> .lh_0_1 { line-height: 0.1; }
// 多级样式名称连接符
$atomic-connectors: ('-', '_');
=> .lh-0_1 { line-height: 0.1; }
// 每个样式可自定义属性名称缩写
// .dis-n { display: none; }
$atomic-display-name: 'dp';
=> .dp-n { display: none; }