@_y/acss-vanilla

v0.0.5

Published

3 years ago

atomic css vanilla version

Downloads

0High
0Medium
0Low

zhangdroid

nanasun

ziven27

acss css atomic vanilla

acss-vanilla

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;

命名规则

只取首字母 .db{ display:block; };
有数字直接连接 .mb10{ margin-bottom:10px; };
百分号用p（percent）表示 .w100p{ width:100%; };
小数点用d（dot）表示 .lh1d2{ line-height:1.2};
想要自定义，用_分割单词，pa_auto;

API

API 主要分为结构，样式，和自定义三个部分。

具体细则可以看未压缩CSS版本注释。

css/acss.css

API 结构

结构主要包括 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个方向代码。

API 样式

样式主要包括 字体，颜色。在代码注释中可以看到 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; }  /* 警告  */

API 自定义样式

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme