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)
Be 栅格系统为二十四栏布局,没有内外边距,没有内外边距,没有内外边距!
按比例自动分配宽度
按内容自动分配宽度
内容+比例 自动分配宽度
指定宽度
指定宽度 + 屏幕识别
屏幕识别 + 0寏度列
屏幕识别 + 混合
大屏时,左侧固定,右侧自增长、 小屏时,按两行各 100% 展示
小屏时,左侧固定,右侧自增长、 大屏时,各50%展示
更复杂的例子
注意三列间的间距,当幕幕变小时,水平间距变为垂直间距
<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)
be-btn:基本样式 - 默认按钮
be-btn-[颜色]:指定颜色的按钮
be-btn-plain:颜色二次处理 - 朴素风格,
be-btn-fade:颜色二次处理 - 褪色,鼠标悬停时恢复原色
be-btn-outline:修饰外观 - 外边框
be-btn-round:修饰外观 - 圆角
be-btn-sm/be-btn-lg:修饰外观 - 尺寸大小
编写顺序:基本样式 + 颜色/颜色二次处理 + 修饰外观
be-btn 为按钮基本样式,需放在最前
be-btn-[颜色] 放在 be-btn 之后
be-btn-fade/be-btn-plain 颜色二次处理,放在 be-btn-[颜色] 之后
be-btn-outline/be-btn-round/be-btn-sm/be-btn-lg 修饰外观,放在最后
默认按钮
默认按钮悬停颜色为主色
黑色按钮
灰色按钮
主色按钮
辅助色按钮
褪色处理
主色按钮褪色后相当于默认按钮
尺寸大小
禁用
让其它元素呈现按钮外观
表单(form)
普通表单
浮动标签
头(heading)
命名规则:be-h[1~6],对应元素 h1, h2, h3, h4, h5, h6
所在类均无内外边距,行高等于字体大小
超链接(a)
命名规则:be-a-后缀值
后缀值:常用颜色
以下为CSS语法相关的样式
边框(border)
背景颜色(background-color)
命名规则:be-bc-后缀值
后缀值:常用颜色
颜色(color)
命名规则:be-c-后缀值
后缀值:常用颜色
显示方式(display)
命名规则:be-d-后缀值,be-屏幕级别-d-后缀值
后缀值:常用显示方式
后缀值列表:none, inline,block, inline-block, flex
<div class="be-d-flex">...</div>
屏幕选择
命名规则:be-屏幕级别-d-后缀值
屏幕级别:sm, md, lg, xl, xxl
后缀值:none, block
be-d-flex子项
浮动(float)
be-fl:左浮动,float: left
be-fr:右浮动,float: right
be-fc:清除浮动
文字大小(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)
后缀值:rem(根元素的字体大小) × 100, 即10表示0.1rem,125表示1.25rem
后缀值列表:10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100, 110, 120, 125, 150, 175, 200, 250, 300, 400
内边距(padding)
内边距采用 "p" 缩写,l, r, t, b 表示左右上下, x, y 表示横向和缀向
命名规则:be-p[l,r,t,b,x,y]-后缀值
be-p-*:四周内边距:padding
be-pl-*:左侧内边距:padding-left
be-pr-*:右侧内边距:padding-right
be-px-*:横向内边距:padding-left + padding-right
be-pt-*:顶部内边距:padding-top
be-pb-*:底部内边距:padding-bottom
be-py-*:纵向内边距:padding-top + padding-bottom
be-pl-* 其中 * 支持所有后缀值,
be-px-* 其中 * 支持所有后缀值,
外边距(margin)
外边距除了采用 "m" 缩写,其它属性与用法与内边距完全一致。
命名规则:be-m[l,r,t,b,x,y]-后缀值
be-m-*:四周内边距:margin
be-ml-*:左侧内边距:margin-left
be-mr-*:右侧内边距:margin-right
be-mx-*:横向内边距:margin-left + margin-right
be-mt-*:顶部内边距:margin-top
be-mb-*:底部内边距:margin-bottom
be-my-*:纵向内边距:margin-top + margin-bottom
定位(position)
父容器
命名规则:be-p-后缀值
后缀值:对齐方式
后缀值列表:absolute, fixed, relative, static, sticky
子容器 left 定位
命名规则:be-l-后缀值
后缀值:百分比值
后缀值列表:0, 50, 100
子容器 right 定位
命名规则:be-r-后缀值
后缀值:百分比值
后缀值列表:0, 50, 100
子容器 top 定位
命名规则:be-t-后缀值
后缀值:百分比值
后缀值列表:0, 50, 100
子容器 bottom 定位
命名规则:be-b-后缀值
后缀值:百分比值
后缀值列表:0, 50, 100
位置转换(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)
<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>
<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>
<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>