【 攻城略地 】使用原子类css库atomic.css助力前端开发

介绍

提供 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

查看 bootstrap-sass

.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; }