@_y/acss-vanilla
Advanced tools
Atomic css 原生版本。
Atomic 是一种极简，高效的 CSS 代码库。 是目前唯一可以做到随着项目推进 CSS 代码越来越少的代码库。 类似张老师的 quicklayout.css。
npm i @_y/acss-vanilla
<head>
<link rel="stylesheet" href="css/acss.min.css">
</head>
<body>
<div class="tac c_000">
hello world!
</div>
</body>
表示： text-align:center; color:#000;
_分割单词，pa_auto;API 主要分为 结构，样式，和自定义三个部分。
具体细则可以看未压缩CSS版本注释。
css/acss.css
结构主要包括 display，position，float，flex 和其它。
可以看到这里并不包含间距部分。因为不同的项目对于 margin 和 padding 的规则不一样，所以需要按照自己的项目按照
有数字直接连接 .mb10{ margin-bottom:10px; };
这个规则自行拓展。如果觉得构建比较麻烦，建议采用 acss-less 和 acss-sass 内置的 mixin 进行生成。比如在 sass 中可以这样使用。
@include acss-p((2, 4, 8, 12, 16, 20, 24, 32));
会生成以上数字对应的4个方向代码。
样式主要包括 字体，颜色。
在代码注释中可以看到 acss.min.css 只包含了黑白两个颜色。
如果想要自定义按照以下规则推展。
.c_xl{ color: #111; } /* 文字比深更深 */
.c_l { color: #222; } /* 文字加深 */
.c_m { color: #333; } /* 文字主色 */
.c_s { color: #666; } /* 文字减比弱更弱 */
.c_primary { color: blue; } /* 主色 */
.c_secondary { color: blue; } /* 次级颜色 */
.c_success { color: green; } /* 成功 */
.c_danger { color: red; } /* 失败 */
.c_warning { color: yellow; } /* 警告 */
| 类名 | 作用 |
|---|---|
.auto | 带宽度的 block 元素水平居中对齐 |
.clearfix | 清除浮动 |
.ell | 单行文字超出容器显示点点点 |
.ell2row | 两行文字超出容器显示点点点, 需要结合行高使用 |
.i | icon 图标基础方法 |
.trans | transition 动画 |
.pa_middle | 基于 position:absolute 上下居中 （兼容性） |
.pa_center | 基于 position:absolute 左右居中 （兼容性） |
.pa_auto | 基于 position:absolute 上下左右居中 （兼容性） |
FAQs
atomic css vanilla version
We found that @_y/acss-vanilla demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.