Skip to content
A library for quickly writing CSS by combining classes
CSS JavaScript Shell
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist version 1.1.0 Oct 13, 2019
docs
lib version 1.1.0 Oct 13, 2019
.gitignore init Oct 13, 2019
.travis.yml fix: Travis-CI test Oct 14, 2019
LICENSE version 1.1.0 Oct 13, 2019
README-en.md chore: update version Nov 9, 2019
README.md
deploly.sh version 1.1.0 Oct 13, 2019
gulpfile.js version 1.1.0 Oct 13, 2019
package-lock.json
package.json feat: version 1.1.1 Nov 9, 2019

README.md

AssemblyCss

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

MIT SIZE VERSION


介绍

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

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

文档

中文 | English

安装

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

You can’t perform that action at this time.