1.0.3 • Published 4 years ago

web-style-base v1.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

使用说明

  • 在使用前根据自己的项目定义变量$colors、$gaps、$levels，这样自定义的颜色等值会覆盖默认的设置（/src/_variable.scss）。
  • 样式是有 scss 编写,引入项目中要有处理 scss 文件的能力（sass-lodaer、node-sass）
  • 引入方式
    // 全局引入
@import "web-style-base";
// 按需引入
@import "web-style-base/base/font";
  • 具体包含的原子类、sass 变量请认真阅读以下内容

文档

目录

  1. 布局
  2. 盒模型
  3. 层级
  4. 字体
  5. 排版
  6. 边框
  7. 背景
  8. 交互
  9. 装饰

layout

布局

位置

名称含义CSS
left-0左边缘left: 0
right-0右边缘right: 0
top-0上边缘top: 0
bottom-0下边缘bottom: 0

相对

名称含义CSS
p-relative相对位置position: relative;

绝对

名称含义CSS
p-absolute绝对位置position: absolute;
p-absolute-100充满包含块position: absolute; left: 0; right: 0; top: 0; bottom: 0;
p-absolute-100-center处于中央position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
p-absolute-100-center-transform处于中央，transform 实现position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

固定

名称含义CSS
p-fixed固定位置position: fixed;
p-fixed-100充满包含块position: fixed; left: 0; right: 0; top: 0; bottom: 0;
p-fixed-100处于中央position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

浮动

名称含义CSS
float-left左浮动float: left;
float-right左浮动float: right;
float-clear左浮动&::after { content: ""; display: block; clear: both; }

类型

名称含义CSS
d-none无display: none;
d-inline行display: inline;
d-block块display: block;
d-inline-block行块display: inline-block;
d-flex块display: flex;
d-inline-flex行块display: inline-flex;

流

名称含义CSS
flex-row主轴水平方向flex-direction: row;
flex-column主轴垂直方向flex-direction: column;
flex-wrap主轴换行flex-wrap: wrap;
flex-nowrap主轴不换行flex-wrap: nowrap;
flex-none主轴不缩放，基尺寸为 autoflex: none;
flex-auto主轴缩放，基尺寸 autoflex: auto;
flex-1主轴缩放，基尺寸为 0flex: 1;
flex-basis-0主轴基尺寸为 0flex-basis: 0;
flex-grow-0主轴放大系数为 0flex-grow: 0;
flex-grow-1主轴放大系数为 1flex-grow: 1;
flex-shrink-0主轴缩小系数为 0flex-shrink: 0;
flex-shrink-1主轴缩小系数为 1flex-shrink: 1;
justify-content-start主轴头对齐justify-content: flex-start;
justify-content-end主轴居尾对齐justify-content: flex-end;
justify-content-center主轴居中对齐justify-content: center;
justify-content-between主轴两端对齐justify-content: space-between;
justify-content-around主轴环绕justify-content: space-around;
align-items-start交叉轴元素头对齐align-items: flex-start;
align-items-end交叉轴元素居尾对齐align-items: flex-end;
align-items-center交叉轴元素居中对齐align-items: center;
align-items-stretch交叉轴元素拉伸align-self: stretch;
align-content-start交叉轴头对齐align-content: flex-start;
align-content-end交叉轴尾对齐align-content: flex-end;
align-content-center交叉轴居中对齐align-content: flex-center;
align-content-between交叉轴两端对齐align-content: flex-between;
align-content-around交叉轴环绕align-content: flex-around;
align-self-start交叉轴元素自身头对齐align-self: flex-start;
align-self-end交叉轴元素居自身尾对齐align-self: flex-end;
align-self-center交叉轴元素自身居中对齐align-self: center;
align-self-stretch交叉轴元素自身拉伸align-self: stretch;

box

盒模型

尺寸计算方式

名称含义CSS
box-sizing-border边框基准box-sizing: border-box;
box-sizing-content内容基准box-sizing: content-box;

尺寸

名称含义CSS
w, h-00 尺寸[width, height]: 0;
w, h-50, 100比例尺寸[width, height]: [50, 100]%;
w-100vw满视口宽度width: 100vw;
h-100vh满视口高度height: 100vh;
w-1em单字符宽度width: 1em;
h-1em单字符高度height: 1em;
w-auto自动宽度width: auto;
h-auto自动高度height: auto;
min-width-0最小宽度 0min-width: 0;
min-height-0最小高度 0min-height: 0;
min-height-100最小高度 100%min-height: 100%
min-height-100vh最小高度 100vhmin-height: 100vh;

其中，w 表示宽度 width，h 表示高度 height。

示例：w-50 表示 50%的宽度。

边距

名称含义CSS
m, p-00 边距[margin, padding]: 0;
m, p-h, v-\<gap>双方向边距[margin, padding]-[left, top]: <gap>px; [margin, padding]-[right, bottom]:<gap>px;
m, p-t, b, l, r-\<gap>单方向边距[margin, padding]-[left, right, top, bottom]: <gap>px;
m, p-t, b, l, r-0减法[margin, padding]-[left, right, top, bottom]: 0 !important;
m-auto自动外边距margin: auto;
m-h, v-auto双方向自动外边距margin-[left, top]: auto; margin-[right, bottom]: auto;
m-t, b, l, r-auto单方向自动外边距margin-[left, right, top, bottom]: auto;
p-t-1上 1px 边距padding-top: 1px;

其中，m 表示外边距 margin，p 表示内边距 padding；l 表示左 left，r 表示右 right，t 表示顶 top，b 表示底 bottom；gap 为变量$gaps 中的值。示例：m-l-5 表示左外边距 5px。

溢出

名称含义CSS
overflow-auto自动overflow: auto;
overflow-auto-x水平自动overflow-x: auto;
overflow-auto-y垂直自动overflow-y: auto;
overflow-hidden隐藏overflow: hidden;
overflow-hidden-x水平隐藏overflow-x: hidden;
overflow-hidden-y垂直隐藏overflow-y: hidden;

level

层级

等级

名称含义CSS
z-\<level-key>等级，可以通过定义$levels 变量以自定义键值z-index: <level-value>;

其中，level-key 为变量$levels中元素的键名，level-value为键值。 示例：如果在$levels 中定义了元素 a: 1，则会存在类 z-a，其对应的 CSS 为 z-index: 1。

可见性

名称含义CSS
level-visible显示visibility: visible;
level-hidden隐藏visibility: hidden;

font

字体

字号

名称含义CSS
f-8-30字号 8~30pxfont-size: [8-30]px;

颜色

名称含义CSS
f-\<color-key>颜色，可以通过定义$colors 变量以自定义键值color: <color-value>

其中，color-key 为变量$colors 中元素的键名，color-value 为键值。

字重

名称含义CSS
f-thin细体font-weight: thin;
f-normal普通font-weight: normal !important;
f-bold粗体font-weight: bold;
f-w-100-900数字型 100-900font-weight: [100-900];

layout

排版

对齐

名称含义CSS
t-left水平左对齐text-align: left;
t-center水平居中对齐text-align: center;
t-right水平右对齐text-align: right;
t-top垂直顶对齐vertical-align: top;
t-middle垂直居中对齐vertical-align: middle;
t-bottom垂直底对齐vertical-align: bottom;

换行

名称含义CSS
t-nowrap禁换行white-space: nowrap;
t-pre保留换行和空白符white-space: pre;
t-break截断单词word-break: break-all; overflow-wrap: break-word;
t-ellipsis单行省略号overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
t-ellipsis-1-3多行行省略号overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: [1-3];

行距

名称含义CSS
line-height-1单倍行距line-height: 1;

border

边框

颜色和位置

名称含义CSS
b-\<color-key>全边框border: 1px solid <color-value>;
b-l, r, t, b-\<color-key>单边框border-[left, right, top, bottom]: 1px solid <color-value>;
b-color-current当前颜色边框border-color: currentColor;

其中，l 表示左 left，r 表示右 right，t 表示顶 top，b 表示底 bottom，color-key 为变量$colors 中元素的键名，color-value 为键值。

background

背景

颜色

名称含义CSS
bg-\<color-key>颜色background-color: <color-value>;
bg-current当前颜色背景background-color: currentColor;
bg-transparent透明背景background-color: transparent;

其中，color-key 为变量$colors 中元素的键名，color-value 为键值。

布局

名称含义CSS
bg-100100%尺寸background-size: 100% 100%; background-repeat: no-repeat;
bg-contain包含background-size: contain; background-repeat: no-repeat;
bg-cover覆盖background-size: cover; background-repeat: no-repeat;
bg-center居中background-position: center; background-repeat: no-repeat;

interact

交互

事件

名称含义CSS
pointer-events-all全部点击事件pointer-events: all;
pointer-events-none禁用点击事件pointer-events: none;

指针

名称含义CSS
cursor-default默认cursor: default
cursor-pointer手形cursor: pointer;

decoration

修饰

不透明度

名称含义CSS
opacity-0-10不透明度opacity: [0.1-1];
样式库stylebasecssscss
@infinitebrahmanuniverse/nolb-web-s@everything-registry/sub-chunk-3124
1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago