Not a Propaganda Machine

    @_y/acss-vanilla

    0.0.5 • Public • Published

    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 结构

    结构主要包括 displaypositionfloatflex 和其它。

    可以看到这里并不包含间距部分。因为不同的项目对于 marginpadding 的规则不一样,所以需要按照自己的项目按照

    有数字直接连接 .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 自定义样式

    类名 作用
    .auto 带宽度的 block 元素水平居中对齐
    .clearfix 清除浮动
    .ell 单行文字超出容器显示点点点
    .ell2row 两行文字超出容器显示点点点, 需要结合行高使用
    .i icon 图标基础方法
    .trans transition 动画
    .pa_middle 基于 position:absolute 上下居中 (兼容性)
    .pa_center 基于 position:absolute 左右居中 (兼容性)
    .pa_auto 基于 position:absolute 上下左右居中 (兼容性)

    DEMO

    <iframe src="./demo.html" frameborder="1" height="400" width="100%"></iframe>

    相关阅读

    1. 「CSS思维」组件化VS原子化
    2. 如何管理 CSS “内裤”
    3. quickLayout.css-快速构建结构兼容的web页面 @张老师;
    4. 「英」在组件化浪潮中重新思考CSS @johnpolacek 虽然是英文,但是网页做得像PPT一样,通俗易懂,强推;
    5. ACSS 官网 @雅虎 这个思维最早应该是雅虎推出来的,最近他们有在推 React ACSS
    6. 关于HTML语义和前端架构 @大漠;
    7. 「译」CSS通用类和“关注点分离” @adamwathan;
    8. 「英」Styling React @SURVIVEJS;
    9. 「英」CSS最佳实践探讨 - Atomic CSS @smashingmagazine;

    Install

    npm i @_y/acss-vanilla

    DownloadsWeekly Downloads

    4

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    10.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • zhangdroid
    • nanasun
    • ziven27