简介
glu-css 是一个轻量级的 CSS 框架，具有高度的可定制性和易用性。使用它可以快速构建美观且响应式的界面。
安装
使用 npm 进行安装：
$ npm install glu-css
也可以使用 Yarn 进行安装：
$ yarn add glu-css
使用
在 HTML 文件中引入样式表：
<link rel="stylesheet" href="path/to/glu.min.css">
在元素中应用特定 class 即可应用对应样式：
<button class="btn btn-primary">Primary Button</button>
样式
glu-css 对样式进行了分类，包括全局样式、颜色、边框、文本、布局等。
全局样式
.container: 容器，宽度为 1170px。.btn: 按钮，大小为 24px * 60px。.form-control: 表单控件，高度为 30px，宽度为 100%，边框为 1px 实线。.text-left、.text-center、.text-right: 文本对齐方式。
颜色
.primary: 主色。.success: 成功颜色。.danger: 危险颜色。.warning: 警告颜色。.info: 信息颜色。
边框
.border: 边框，颜色为#e5e5e5，边框样式为实线。.border-top、.border-right、.border-bottom、.border-left: 指定某一边的边框。
文本
.ellipsis: 文字截断，超出部分显示为省略号。
布局
.d-flex、.justify-content-start、.justify-content-center、.justify-content-end、.justify-content-around、.justify-content-between: 弹性布局。.col-1至.col-12：列宽，每行最多 12 格，每个列的宽度为col-数字。
示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------
----- ---------------- ---------------------------------------------
-------
------
---- ------------------
--- --------------------------- ---------
------
---- -------------------
------ --------------------------------
------ ----------- -------------------- ------------- ------------------ ----------
------
---- -------------------
------ --------------------------------
------ --------------- -------------------- ------------- ------------------ ----------
------
---- --------------------
------- ------------- ---------- ----------------- -----------
------
-------
----
---- ------------- -------------------------
---- ------------ -------------- -------
---- ------------ -------------- -------
---- ------------ -------------- -------
------
------
-------
-------结论
通过以上教程，我们可以看到 glu-css 的使用非常简单，只需要在 HTML 中引入样式表并应用对应 class 即可。同时，glu-css 的样式分类清晰，方便开发者快速定位对应样式。
对于对 CSS 不太熟悉的开发者，glu-css 可以作为快速搭建页面的利器。对于有一定 CSS 基础的开发者，glu-css 可以作为代码复用的工具，节省开发时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee7419