momtboy / assembly-css

A library for quickly writing CSS by combining classes

AssemblyCss

通过组合class方式快速书写css的库

---

介绍

assembly-css 是一个通过sass, gulp 构建完成的css库, 提供了基础的css样式类, 在开发大型项目避免书写重复的css样式。

过多的考虑 在小型项目中由于代码量不大, 加上库的体积, 反而不建议使用

文档

中文 | 英文

安装

CDN 引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css">

生产环境使用压缩版本

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.min.css">

NPM 引入

# 最新稳定版
$ npm install assembly-css

import 'assembly-css/lib/index.scss'

快速开发三栏布局

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/assembly-css/dist/assembly-css.css">
<section class="flex j-between">
  <div class="w-200 bg-green">left</div>
  <div class="flex-1 bg-blue">content</div>
  <div class="w-200 bg-green">right</div>
</section>

你可以直接拷贝到自己的demo文件里尝试下运行效果, 也可以点击这里查看写好的例子

优点

• 方便快捷 通过npm安装或直接引入css文件, 随时可用, 在大型项目中表现尤为出色
• 代码样式逻辑更加清晰
• 易维护 在团队开发过程中, 修改样式只需要更改DOM上的类即可, 避免了DOM逐级嵌套样式的混乱

提问

你可以在issues直接提问

最后

如果你对这个项目有兴趣, 欢迎PR