BE 前端框架

• BE前端样式仅封装了常用的样式
• 元素相关的样式多采用了元素名，如：input 对应的样式名：be-input, 代码示例：<input class="be-input">
• CSS 语法相关的样式多采用了首字母缩写，如：text-align:left 对应的样式名: be-ta-left

如何使用

方式一：直接引入 be.css

<link rel="stylesheet" href="https://scss.phpbe.com/be.css">

直接引入的方式将使用默认的样式，可以通过CSS常量修改主色

<?php
// 主题配置
$configTheme = \Be\Be::getConfig('Theme.ShopFai.Theme');

// CSS 处理库
$libCss = \Be\Be::getLib('Css');

$mainColor = $configTheme->mainColor;
$mainColor1 = $libCss->lighter($mainColor, 10);
$mainColor2 = $libCss->lighter($mainColor, 20);
$mainColor3 = $libCss->lighter($mainColor, 30);
$mainColor4 = $libCss->lighter($mainColor, 40);
$mainColor5 = $libCss->lighter($mainColor, 50);
$mainColor6 = $libCss->lighter($mainColor, 60);
$mainColor7 = $libCss->lighter($mainColor, 70);
$mainColor8 = $libCss->lighter($mainColor, 80);
$mainColor9 = $libCss->lighter($mainColor, 90);
$mainColorHover = $libCss->darker($mainColor, 10);
// 以上示例为 Be 框架中的用法，其它框架直接给变量赋值即可
?>
<style type="text/css">
    body {
        --main-color: <?php echo $mainColor; ?>;
        --main-color-1: <?php echo $mainColor1; ?>;
        --main-color-2: <?php echo $mainColor2; ?>;
        --main-color-3: <?php echo $mainColor3; ?>;
        --main-color-4: <?php echo $mainColor4; ?>;
        --main-color-5: <?php echo $mainColor5; ?>;
        --main-color-6: <?php echo $mainColor6; ?>;
        --main-color-7: <?php echo $mainColor7; ?>;
        --main-color-8: <?php echo $mainColor8; ?>;
        --main-color-9: <?php echo $mainColor9; ?>;
        --main-color-hover: <?php echo $mainColorHover; ?>;
    }
</style>
        

方式二：引入 be/scss 库，跟据需要定制化任何样式

BE框架的项目，be/scss 默认已经引入

非BE框架的项目，使用 composer require be/scc 引入， 或在在项目 composer.json 中加入以下代码段后 执行 composer update

...
"require": {
    "be/scss": "*"
}
...
        

引入be/scss库后，在具体的项目中新建一个目录，例 scss。 将 vendor/be/scss 的常量文件 _vars.scss 及 主文件 be.scss 复制到该目录中，修改 be.sccs 如下（相对咱径以肯体项目为准）:

// 参数常量
@import "vars"; // 注意：引入文件里不需要开头的下划线

// 相关函数
@import "../../../vendor/be/scss/src/functions";

@import "../../../vendor/be/scss/src/main"; // 主要
@import "../../../vendor/be/scss/src/container"; // 容器
@import "../../../vendor/be/scss/src/grid"; // 栅格系统
@import "../../../vendor/be/scss/src/button"; // 按钮
@import "../../../vendor/be/scss/src/form"; // 表单
@import "../../../vendor/be/scss/src/utilities"; // 工具类
        

跟据需要修改 _vars.scss 中的变量值，使用 scss 编译工具（如:koala）重新编译 be.scss 生成个性化的 be.css。

示例中仅重写了 vars 常量, 实际项目中可跟据需要重写某个模块（如按钮）

不要直接修改 vendor 中的源文件，这样将限制后期 composer 更新功能的使用。

整体配色

灰度包系

灰度包系包含从黑到白的过波色

主色 & 主色系

主色用来规定网站的主色调，网站的内容应尽量限定使用主色系+灰度包系, 与大部分前端框架不同，主色从辅助色中独立出来，可实现改变网站配色时，不影响其它色系的使用。

输助色

输助色定义了常用的颜色

容器（container）

<div class="be-container">...</div>

栅格系统（grid）

按钮（button）

表单（form）

头（heading）

命名规则：be-h[1~6]，对应元素 h1, h2, h3, h4, h5, h6
所在类均无内外边距，行高等于字体大小

以下为CSS语法相关的样式

边框（border）

显示方式（display）

<div class="be-d-flex">...</div>

浮动（float）

文字大小（font-size）

命名规则：be-fs-后缀值
后缀值：rem(根元素的字体大小) × 100， 即10表示0.1rem，125表示1.25rem
后缀值列表：50, 60, 70, 75, 80, 90, 100, 110, 120, 125, 150, 175, 200, 250, 300, 400

文字样式（font-style）

命名规则：be-fs-后缀值
后缀值列表：normal, italic

文字加粗（font-weight）

命名规则：be-fw-后缀值
后缀值列表：normal, bold, bolder, light, lighter

行高（line-height）

命名规则：be-lh-后缀值
后缀值：rem(根元素的字体大小) × 100， 即10表示0.1rem，125表示1.25rem
后缀值列表：50, 60, 70, 75, 80, 90, 100, 110, 120, 125, 150, 175, 200, 250, 300, 400

边距（spacing）

定位（position）

父容器

命名规则：be-p-后缀值
后缀值：对齐方式
后缀值列表：absolute, fixed, relative, static, sticky

位置转换（transform: translate）

命名规则：be-t-translate-后缀值
后缀值列表：middle, x-middle, y-middle
be-t-translate-middle：transform: translate(-50%, -50%)
be-t-translate-x-middle：transform: translateX(-50%)
be-t-translate-y-middle：transform: translateY(-50%)

文本辅助（text）

命名规则：be-t-后缀值
be-t-ellipsis：文本溢出时省略号
be-t-ellipsis-2：文本2行溢出时省略号，此类不能与 padding 同时用在同一个元素上，可以嵌套一层，外层 padding，内层处理文本截断。
be-t-break：强制换行

文本对齐（text-align）

命名规则：be-ta-后缀值
后缀值：对齐方式

重直对齐（vertical-align）

命名规则：be-va-后缀值
后缀值：对齐方式

文本装饰（text-decoration）

命名规则：be-td-后缀值
后缀值列表：underline, line-through, none

文本转换（text-transform）

命名规则：be-tt-后缀值
后缀值列表：lowercase, uppercase, capitalize, none

文本选择（user-select）

命名规则：be-us-后缀值
后缀值列表：all, auto, none

宽度（width）

宽度采用 "w" 缩写

命名规则：be-w-百分比，百分比取值范围：1~100