BE 前端框架

源码地址： https://github.com/phpbe/scss

如何使用

方式一：直接引入 be.css

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

直接引入的方式将使用默认的样多格式

方式二：引入 be/scss 库

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

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


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

引入be/scss库后，在vendor/be/scss目录下，你可以跟据需要编辑配置文件：_vars.scss，重新编译生成 be.css，生成个性化的前端样式。

整体配色

灰度包系

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

主色 & 主色系

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

输助色

输助色定义了常用的颜色

容器（container）

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

栅格系统（grid）

Be 栅格系统为二十四栏布局，没有内外边距，没有内外边距，没有内外边距！

按比例自动分配宽度

be-col
be-col
be-col
be-col
be-col

按内容自动分配宽度

be-col-auto 内容多，宽度自动撑大
be-col-auto
be-col-auto

内容+比例 自动分配宽度

be-col-auto 内容多，宽度自动撑大
be-col 剩余宽度
be-col-auto 内容多，宽度自动撑大
be-col-auto
be-col 剩余宽度
be-col-auto
be-col-auto
be-col 剩余宽度等分
be-col 剩余宽度等分

指定宽度

be-col-2
be-col-4
be-col-5
be-col-6
be-col-7
be-col-4
be-col-5
be-col-6

指定宽度 + 屏幕识别

be-col-24 be-col-md-12 be-col-lg-8
be-col-24 be-col-md-12 be-col-lg-8
be-col-24 be-col-md-12 be-col-lg-8

屏幕识别 + 0寏度列

be-col-0 be-col-md-12
be-col-24 be-col-md-12

按钮（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-fade/be-btn-plain 颜色二次处理，须放在 be-btn-[颜色] 之后

be-btn-outline/be-btn-round/be-btn-sm/be-btn-lg 控制外观，放在最后

默认按钮

默认按钮悬停颜色为主色

       

黑色按钮

       

灰色按钮

       

主色按钮

       

辅助色按钮

其它元素展示按钮外观

be-btn be-btn-main（超链接）

褪色处理

             

尺寸大小

禁用

表单（form）

普通表单

静态文本
静态文本内容
输入框
密码
下拉框
上传文件
多行文本
复选框
单选框

浮动标签

头（heading）

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

be-h1，文字大小及行高 2.5rem
be-h2，文字大小及行高 2rem
be-h3，文字大小及行高 1.5rem
be-h4，文字大小及行高 1.25rem
be-h5，文字大小及行高 1rem
be-h6，文字大小及行高 0.8rem

以下为CSS语法相关的样式

边框（border）

be-b-ccc：四边框，border: #ccc 1px solid
be-bl-ccc：左边框，border-left: #ccc 1px solid
be-br-ccc：右边框，border-right: #ccc 1px solid
be-bt-ccc：上边框，border-top: #ccc 1px solid
be-bb-ccc：下边框，border-bottom: #ccc 1px solid

背景颜色（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-block be-d-md-none 手机可见，桌面级别屏幕不可见
be-d-none be-d-md-block 桌面级别屏幕可见，手机不可见

be-d-flex子项

be-flex-0
be-flex-0
be-flex-1
be-flex-1
be-flex-0
be-flex-1

浮动（float）

be-fl：左浮动，float: left
be-fr：右浮动，float: right
be-fc：清除浮动

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

be-fs-50
be-fs-75
be-fs-100
be-fs-125
be-fs-200
be-fs-400

文字样式（font-style）

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

be-fs-normal
be-fs-italic

文字加粗（font-weight）

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

be-fw-normal
be-fw-bold
be-fw-bolder
be-fw-light
be-fw-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

be-lh-100
be-lh-150
be-lh-200
be-lh-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-p-10 相当于：padding: 0.1rem
be-p-25 相当于：padding: 0.25rem
be-p-100 相当于：padding: 1rem
be-p-125 相当于：padding: 1.25rem
be-p-200 相当于：padding: 2rem
be-pl-125 相当于：padding-left: 1.25rem
be-pl-* 其中 * 支持所有后缀值,
be-px-125 相当于：padding-left: 1.25rem; padding-right: 1.25rem
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-break：强制换行

be-t-ellipsis：longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong text
be-t-ellipsis-2：longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong text
be-t-ellipsis：长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长 文本
be-t-ellipsis-2：长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长 文本
be-t-break: longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong text
be-t-break: 长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长 文本

文本对齐（text-align）

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

be-ta-left
be-ta-center
be-ta-right

重直对齐（vertical-align）

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

be-va-baseline be-va-top be-va-middle be-va-bottom be-va-text-top be-va-text-bottom

文本装饰（text-decoration）

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

be-td-underline：Demo Text
be-td-line-through：Demo Text
be-td-none：Demo Text

文本转换（text-transform）

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

be-tt-lowercase：Demo Text
be-tt-uppercase：demo text
be-tt-capitalize：demo text
be-tt-none：demo text

文本选择（user-select）

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

be-us-all：自动选中所有文本内容
be-us-auto：用户控制选中的文本
be-us-none：禁止选中文本

宽度（width）

宽度采用 "w" 缩写

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

be-w-67， 宽度 67%
be-w-100， 宽度 100%
be-mw-100，最大宽度 100%，常用于控制图像最大宽度