README

简单优雅的CSS框架，使您的开发更轻松！整个框架都是为了适应现代扁平化设计而构建的。

编译

为了编译框架，请使用 npm install 安装节点依赖项，然后在LESS文件每次更改后，使用此命令重新编译最终的CSS：lessc src/less/core.less src/css/style.css。祝您享受使用！

模块 - 小部件

整个CSS框架由单独的模块 - 小部件组成。您可以选择编译和使用其中的一些。

• grid - 网格系统，使您的定位更加出色
• spacing - 外边距和填充类，帮助您设置间距
• variables - 框架的自定义变量和覆盖变量
• variables-default - 框架的所有默认变量
• alerts - 您想要的所有警告消息
• buttons - 美观整洁的按钮
• navbar - 导航栏

网格

间距

间距允许您为外边距和填充设置类。

变量

此模块中使用的变量有

• @space-big - 设计中的大空间，用于 // TODO
• @space-medium - 中等空间
• @space-small - 小空间

类

所有类的模式为：<type>-<size>-<position>，其中type是 padding/margin，size是 big/medium/small/none，position是 top/right/bottom/left/vertical/horizontal/all。

变量

默认变量

警告

按钮

用于按钮的模块

变量

此模块中使用的变量有

• @space-small - 按钮填充中使用的较小空间
• @color-primary - 主要颜色
• @color-primary-hover - 主要颜色（悬停状态）
• @color-secondary - 次要颜色
• @color-secondary-hover - 次要颜色（悬停状态）
• @color-tertiary - 三级颜色
• @color-tertiary-hover - 三级颜色（悬停状态）
• @color-success - 成功颜色
• @color-success-hover - 成功颜色（悬停状态）
• @color-danger - 危险颜色
• @color-danger-hover - 危险颜色（悬停状态）
• @color-info - 信息颜色
• @color-info-hover - 信息颜色（悬停状态）
• @color-warning - 警告颜色
• @color-warning-hover - 警告颜色（悬停状态）
• @color-dark-grey - 灰色（默认）颜色
• @color-dark-grey-hover - 灰色（默认）颜色（悬停状态）

类

• button - 任何按钮的默认类
• button-<SLUG> - 默认类之外的附加类，其中 <SLUG> 是以下之一： success、info、danger、warning、primary、secondary、tertiary

导航栏

使用具有 navbar 类的 nav 标签，使用 ul 和 li 标签表示单个项。

变量

此模块中使用的变量有

• @space-small - 导航栏中链接填充中使用的较小空间

类

• navbar - 主要导航栏类