【原子样式实践】第2篇原子样式分类和定义

1 布局

1.1 布局分类

页面元素的显示方式主要分为外部显示和内部显示，参考属性 display。

外部显示主要是元素的外在表现，包括行内显示、区块显示。

内部显示主要是子元素的显示方式，对应我们常说的布局，包括流式（Flow）布局、浮动（Float）布局、弹性（Flex）布局、网格（Grid）布局等。

1.2 流式布局

浏览器默认采用的布局，页面元素自上而下排列，取决于原生样式。对于简单页面或者DEMO页面可以使用。

<!-- 使用示例 -->
<div class="container">
<div class="card">
<div class="item">
      ...
</div>
</div>
<div class="card">
<div class="item">
      ...
</div>
</div>
</div>

这种情况下无需额外定义样式。

1.3 浮动布局

用于页面元素的全局灵活布局或者次要元素的显示布局。

主要使用属性 position，配合 top、bottom、left、right 使用。

（1）全局灵活布局包括游戏、活动等全屏场景。

.stage {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.circle {
position: absolute;
width: 32px;
height: 32px;
top: 80px;
left: 100px;
}

（2）次要元素布局包括菜单、红点等组件内应用场景。

# 红点场景示例
.data-label {
position: relative;
width: 64px;
height: 64px;
}
.red-dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 4px;
top: -3px;
right: -3px;
}

这种情况下，可以定义简单样式。

.pos-abs {
position: absolute;
}
.pos-rel {
position: relative;
}
.wh-full {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.p-tr-3 {
top: 3px;
right: 3px;
}

浮动的情况下，会涉及到层次的问题，涉及到属性 z-index，可以定义样式如下。

.z-1 { z-index: 1 }
.z-2 { z-index: 2 }
.z-3 { z-index: 3 }
.z-4 { z-index: 4 }
.z-5 { z-index: 5 }

1.4 弹性布局

1.4.1 flex布局特点

flex布局是使用方便的布局，目前主要的布局方式。

（1）支持横向、纵向、换行等多种排列方向，使用属性 flex-direction , flex-wrap。

（2）支持上、下、左、右、中等对齐方式，使用属性 justify-content, align-items, align-content。

（3）支持内部元素的有序排列，使用属性 order。

（4）支持弹性变大、缩小，使用属性 flex-grow, flex-shrink。

1.4.2 flex布局样式

根据排列方向、对齐方式等角度除法封装常用样式，示例如下。

.row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
}
.row-r { ... }

.col {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.col-r { ... }

.ai-top { ... }
.ai-center {
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;

}
.ai-bottom { ... }

.jc-left { ... }
.jc-center {
-webkit-justify-content: center;
justify-content: center;
}
.jc-right { ... }

.c1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.c2 { ... }

.c-g1 { ... }
.c-s1 { ... }

<!-- 使用示例 -->
<div class="row">
  <div class="c1">...</div>
  <div class="c1">...</div>
  <div class="c1">...</div>
</div>

1.5 网格布局

1.5.1 网格布局特点

弹性布局好用，但是对于多行多列的布局写起来太过于麻烦，而网格布局则能很好的解决这一问题。

网格布局使用属性 grid-template-columns，其参数可以设置为不同宽度，使用可以很灵活。但在预定义的情况下，就失去了这一灵活性。

在结合弹性布局的情况下，可以考虑固定网格，比如两列均分、九宫格，十六宫格等，可以满足基本的布局需要。

如果有其他复杂场景，也可以自定义样式追加使用。

1.5.2 网格布局样式


.gc-2 {
display: grid;
grid-template-columns: 1fr 1fr;
}

.gc-2-21 {
display: grid;
grid-template-columns: 2fr 1fr;
}

.gc-2-12 {
display: grid;
grid-template-columns: 1fr 2fr;
}

.gc-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.gc-4 {
  ...
}

.gc-5 {
  ...
}

1.6 元素空间

1.6.1 尺寸

主要是宽度 width 和高度 height，根据常用尺寸定义即可，例如icon、缩略图、封面图、卡片、标题、列表等。

.w-36 {
width: 36px;
}
.w-80 {
width: 80px;
}
...

.h-120 {
height: 120px;
}
.h-80 {
height: 80px;
}
.h-20 {
height: 20px;
}
.h-1 {
height: 1px;
}
...

.wh-36 {
width: 36px;
height: 36px;
}
.wh-96 {
width: 96px;
height: 96px;
}

为了配合弹性布局使用，需要定义最小宽度 min-width 或者最小高度 min-height，序号、空白等都需要。

.mw-100 {
min-width: 100px;
}

.mh-200 {
min-height: 200px
}

1.6.2 元素间距

间距分为对内 padding 和对外 margin 两种，分全部、水平（ｘ）、垂直（ｙ）方向或者上（ｔ）下（ｂ）左（ｌ）右（ｒ），根据常用规范定义使用即可。

.m-20 { margin: 20px }


.px-20 { 
padding-left: 20px;
padding-right: 20px;
}
.px-10 {...}

.mx-32 { ... }
.mx-20 { ... }

.my-20 { ... }
.my-10 { ... }

.pt-10 { padding-top: 10px }
.pb-10 { padding-bottom: 10px }
.pl-10 { padding-left: 10px }
.pr-10 { padding-right: 10px }

1.6.3 子元素间距

对于使用弹性布局和网格布局的，元素间的间距可以在父元素定义。

.gg-30 { grid-gap: 30px; }
.gg-20 { grid-gap: 2.667vmin; }
.gg-10 { grid-gap: 1.333vmin; }
.gg-5 { grid-gap: 0.667vmin; }

2 色彩

2.1 上色的元素

元素的背景色 background-color 、前景色（字体颜色） color 和边框色 border-color 均可定义。

对于页面的背景色的全局设置，根据情况可以使用 style 定义，其他均使用预定义样式。

2.2 色彩主题

除了黑白色基本主题外，还需要支持信号色（红、黄、绿，对应错误/失败、警告/提示、成功）和多个主题。

每套主题需要设置一个主题色。

# 背景颜色
.bg-primary { ... }
.bg-white { ... }
.bg-red { ... }
.bg-yellow { ... }
.bg-blue { ... }
.bg-green { ... }

# 字体颜色
.fc-primary { ... }
.fc-white { ... }
.fc-black { ... }
.fc-red { ... }
.fc-yellow { ... }
.fc-blue { ... }
.fc-green { ... }

.fc-gray1 { ... }
.fc-gray2 { ... }
.fc-gray3 { ... }

.bg-gray1 { ... }
.bg-gray3 { ... }

# 线颜色
.line-color-primary { ... }
.line-color-red { ... }
.line-color-yellow { ... }
.line-color-green { ... }

...

2.3 色阶

对于同一色系，色阶要具有区分度，不一定需要连续。

颜色定义需要设计师完成。

3 排版

3.1 排版说明

取消H1、H2、FORM等组合样式使用，除非是大量内容的固定格式，可以降级为原子样式。

3.2 字体名称

避免使用浏览器不支持的字体，数字字体或者符号字体尽量小。

# 数字字体
.ff-n { ... }

3.3 字体大小

使用常见字号。

.fs-36 { font-size: 36px }
.fs-28 { font-size: 28px }
.fs-20 { font-size: 20px }

3.4 字体颜色

参见色彩主题，以 fc- 开头。

3.5 字体样式

.fw-b { font-weight: bold }
.f-lt { text-decoration: line-through; }

由于斜体的阅读体验不太好，可以不使用。

3.6 字体换行

多行文字，尤其是涉及到较长英文的内容，需要换行支持。

.f-wb {
word-wrap: break-word;
word-break: break-all;
}

3.7 文字对齐

可以考虑使用，也可以考虑使用布局替代。

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

4 修饰

4.1 修饰说明

用于强化元素表现，达到更好的表达效果。

修饰的方式很多，按需选用即可。

4.2 边框

使用边框样式，使用宽度 border-width、样式 border-style 和颜色 border-color 分别定义。

由于边框使用频繁，可以定义组合样式全边框 line-all，降级为原子样式。

.line-all { 
border-width: 1px;
border-style: solid;
border-color: #cccccc;
}

.line-bottom { ... }

.line-width-2 { border-width: 2px; }

.line-color-red { border-color: #990000 }
...

4.3 圆角

使用border-radius定义，根据需要分别定义左上、左下、右上、右下圆角。

特别定义一个圆形。


.round {
border-radius: 50%;
display: flex;
overflow: hidden;
}

.br-36 {
-webkit-border-radius: 4.8vmin;
border-radius: 4.8vmin;
}

.br-l-36 {
-webkit-top-left-radius: 4.8vmin;
border-top-left-radius: 4.8vmin;
-webkit-bottom-left-radius: 4.8vmin;
border-bottom-left-radius: 4.8vmin;
display: flex;
overflow: hidden;
}

.br-r-36 {
-webkit-top-right-radius: 4.8vmin;
border-top-right-radius: 4.8vmin;
-webkit-bottom-right-radius: 4.8vmin;
border-bottom-right-radius: 4.8vmin;
display: flex;
overflow: hidden;
}

.br-bl-36 {
border-bottom-left-radius: 4.8vmin;
border-top-left-radius: 4.8vmin;
}

.br-br-36 {
border-top-right-radius: 4.8vmin;
border-bottom-right-radius: 4.8vmin;
}

4.4 阴影

根据需要使用阴影 box-shadow。

.box-shadow5 {
box-shadow: 0px 5px 10px #d8d8d8;
}

4.5 透明度

按需定义即可，使用 opacity 属性。

.op5 {
opacity: 0.5;
}

4.6 旋转

元素根据需要可能要旋转，使用变形 transform。

.r180 {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}

5 小结

原子样式的分类要合理，可扩展。

命名规则明确。常用的使用简称，必要时使用全称，避免混淆。

具体样式要少。按需定义，不使用的要删除。

2 Flex 布局教程：语法篇 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

秒客网

【原子样式实践】第2篇原子样式分类和定义

1 布局

1.1 布局分类

1.2 流式布局

1.3 浮动布局

1.4 弹性布局

1.4.1 flex布局特点

1.4.2 flex布局样式

1.5 网格布局

1.5.1 网格布局特点

1.5.2 网格布局样式

1.6 元素空间

1.6.1 尺寸

1.6.2 元素间距

1.6.3 子元素间距

2 色彩

2.1 上色的元素

2.2 色彩主题

2.3 色阶

3 排版

3.1 排版说明

3.2 字体名称

3.3 字体大小

3.4 字体颜色

3.5 字体样式

3.6 字体换行

3.7 文字对齐

4 修饰

4.1 修饰说明

4.2 边框

4.3 圆角

4.4 阴影

4.5 透明度

4.6 旋转

5 小结

相关文章

【原子样式实践】第2篇 原子样式分类和定义

1 布局

1.1 布局分类

1.2 流式布局

1.3 浮动布局

1.4 弹性布局

1.4.1 flex布局特点

1.4.2 flex布局样式

1.5 网格布局

1.5.1 网格布局特点

1.5.2 网格布局样式

1.6 元素空间

1.6.1 尺寸

1.6.2 元素间距

1.6.3 子元素间距

2 色彩

2.1 上色的元素

2.2 色彩主题

2.3 色阶

3 排版

3.1 排版说明

3.2 字体名称

3.3 字体大小

3.4 字体颜色

3.5 字体样式

3.6 字体换行

3.7 文字对齐

4 修饰

4.1 修饰说明

4.2 边框

4.3 圆角

4.4 阴影

4.5 透明度

4.6 旋转

5 小结

相关文章

【原子样式实践】第2篇原子样式分类和定义