BE 前端框架

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

如何使用

方式一：直接引入 be.css

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

引入该CSS后即可直接使用，风格为默认的样式，可以通过CSS常量覆盖修改主色调及搭配色

<style type="text/css">
    body {
        <?php
        // 主题配置
        $configTheme = \Be\Be::getConfig('Theme.System.Theme');

        echo '--major-color: ' . $configTheme->majorColor . ';';
        echo '--minor-color: ' . $configTheme->minorColor . ';';
        echo '--font-color: ' . $configTheme->fontColor . ';';

        // CSS 处理库
        $libCss = \Be\Be::getLib('Css');
        for ($i=1; $i<=9; $i++) {
            // 主色依次减谈 10%
            echo '--major-color-' . $i. ': ' . $libCss->lighter($configTheme->majorColor, $i * 10) . ';';
            // 主色依次加深 10%
            echo '--major-color' . $i. ': ' . $libCss->darker($configTheme->majorColor, $i * 10) . ';';

            // 搭配色依次减谈 10%
            echo '--minor-color-' . $i. ': ' . $libCss->lighter($configTheme->minorColor, $i * 10) . ';';
            // 搭配色依次加深 10%
            echo '--minor-color' . $i. ': ' . $libCss->darker($configTheme->minorColor, $i * 10) . ';';

            // 文字颜色依次减谈 10%
            echo '--font-color-' . $i. ': ' . $libCss->lighter($configTheme->fontColor, $i * 10) . ';';
            // 文字颜色依次加深 10%
            echo '--font-color' . $i. ': ' . $libCss->darker($configTheme->fontColor, $i * 10) . ';';
        }
        ?>
    }
</style>
        

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

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

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

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

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

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

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

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

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

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

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

实际项目中，可以使用 ScssPhp 库， 跟据用户配置，实时更新样式

<?php
use ScssPhp\ScssPhp\Compiler;

$compiler = new Compiler();

$scss = '@import "path/to/your/scss/vars";';
$scss .= '@import "vendor/be/ui/src/functions";';
$scss .= '@import "vendor/be/ui/src/main";';
$scss .= '@import "vendor/be/ui/src/container";';
$scss .= '@import "vendor/be/ui/src/grid";';
$scss .= '@import "vendor/be/ui/src/button";';
$scss .= '@import "vendor/be/ui/src/form";';
$scss .= '@import "vendor/be/ui/src/utilities";';

$compiler->addImportPath(__DIR__ . '/');
$result = $compiler->compileString($scss);

file_put_contents('/path/to/your/css/be.css', $result->getCss());
?>
        

整体配色

灰度包系

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

主色 & 主色系

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

搭配色

搭配色配合主色实现网站风格

字体颜色

控制字体显示

输助色

输助色定义了常用的颜色

容器（container）

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

栅格系统（grid）

<div class="be-row">
    <div class="be-col-24 be-lg-col-auto">
        <div class="demo-box">be-col-24 be-lg-col-auto</div>
    </div>

    <div class="be-col-24 be-lg-col-auto">
        <div class="be-pl-100 be-mt-100"></div>
    </div>

    <div class="be-col-24 be-lg-col">
        <div class="demo-box">be-col-24 be-lg-col</div>
    </div>

    <div class="be-col-24 be-lg-col-auto">
        <div class="be-pl-100 be-mt-100"></div>
    </div>

    <div class="be-col-24 be-lg-col-auto">
        <div class="demo-box">be-col-24 be-lg-col-auto 右侧</div>
    </div>
</div>

按钮（button）

表单（form）

头（heading）

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

超链接（a）

命名规则：be-a-后缀值
后缀值：常用颜色

以下为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

高度（height）

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

行高（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-ellipsis-3：文本3行溢出时省略号。
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

分页（pagination）

• 首页
• 上一页
• 1
• 2
• 3
• 4
• 5
• 6
• 下一页
• 末页

<ul class="be-pagination">
    <li><a href="#">首页</a></li>
    <li><a href="#">上一页</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><span>3</span></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">下一页</a></li>
    <li><a href="#">末页</a></li>
</ul>
        

• 首页
• 上一页
• 1
• 2
• 3
• 4
• 5
• 6
• 下一页
• 末页

<ul class="be-pagination be-pagination-sm">
    <li><a href="#">首页</a></li>
    <li><a href="#">上一页</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><span>3</span></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">下一页</a></li>
    <li><a href="#">末页</a></li>
</ul>
        

• 首页
• 上一页
• 1
• 2
• 3
• 4
• 5
• 6
• 下一页
• 末页

<ul class="be-pagination be-pagination-lg">
    <li><a href="#">首页</a></li>
    <li><a href="#">上一页</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><span>3</span></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">下一页</a></li>
    <li><a href="#">末页</a></li>
</ul>