feat: update BEM naming

Mu-L · Feb 12, 2020 · d048813 · d048813
1 parent f65382b
commit d048813
Show file tree

Hide file tree

Showing 18 changed files with 297 additions and 216 deletions.
diff --git a/README.md b/README.md
@@ -2,16 +2,23 @@
 
 赫蹏（hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。
 
+预览：[https://sivan.github.io/heti/](https://sivan.github.io/heti/)
+
 主要特性：
 - 全标签样式统一；
 - 贴合网格的排版；
-- 内置多种预设字体族（仅限桌面端）；
-- 支持横排、竖排两种排版；
-- 支持诗词、行间注版式；
-- 兼容 *normalize.css*、**CSS Reset** 等大部分重置样式；
+- 预置多种预设字体族（仅限桌面端）；
+- 预置横排、直排（竖排）样式；
+- 预置古文、诗词样式；
+- 预置行间注排版样式；
+- 预置多栏排版样式；
+- 兼容 *normalize.css*、*CSS Reset* 等常见样式重置；
 - 移动端支持；
+- 基于 BEM；
 - ……
 
+总之，用上就会变好看。
+
 ## 使用方法
 
 1. 在页面的 `<head>` 标签中引入 `heti.css` 文件：

diff --git a/lib/_base.scss b/lib/_base.scss
@@ -63,12 +63,8 @@
     text-align: justify;
 
     @include non-cjk-block {
-      text-align: left;
+      text-align: start;
     }
-
-    //+ pre {
-    //  margin-block-start: -$std-block-unit / 2;
-    //}
   }
 
   pre {
@@ -81,6 +77,7 @@
     padding-inline-start: $std-inline-unit;
     padding-inline-end: $std-inline-unit;
     overflow: auto;
+    font-family: $font-family-mono;
     white-space: pre;
     word-wrap: normal;
     background-color: rgba(0, 0, 0, 0.054);

diff --git a/lib/_heading.scss b/lib/_heading.scss
@@ -15,6 +15,7 @@
 
     // 顶边距默认为一行间距，且不因边距重叠原因减半
     // 底边距考虑到亲密性，默认为半行间距
+    margin: 0;
     margin-block-start: $std-block-unit;
     margin-block-end: $std-block-unit / 2;
     font-weight: $font-weight-bold;

diff --git a/lib/_helper-inline.scss b/lib/_helper-inline.scss
diff --git a/lib/_inline.scss b/lib/_inline.scss
@@ -35,7 +35,7 @@
   dfn {
     font-weight: $font-weight-bold;
 
-    // 非中文时显示斜体
+    // 非中文时不加粗
     @include non-cjk-block {
       font-weight: $font-weight-normal;
     }
@@ -110,6 +110,7 @@
     margin-inline-start: 0.25em;
     margin-inline-end: 0.25em;
     font-size: 0.75em;
+    font-family: $font-family-hei;
     line-height: 1;
     vertical-align: baseline;
   }

diff --git a/lib/_list.scss b/lib/_list.scss
@@ -24,6 +24,7 @@
     }
   }
 
+  /* 兼容性处理 */
   // 重置部分 CSS Reset 中 ul, ol { list-style: none; } 造成的样式污染
   // 如果搭配 normalize.css 使用，则不存在这些样式污染
   @if $_css-reset-scheme == "reset" {

diff --git a/lib/_modifier-layout.scss b/lib/_modifier-layout.scss
diff --git a/lib/_table.scss b/lib/_table.scss
@@ -1,6 +1,6 @@
 /**
  * Author: Sivan [[email protected]]
- * Description: 表格样式
+ * Description: table styles.
  */
 @import "variables";
 
@@ -24,6 +24,8 @@
 
   caption {
     caption-side: bottom;
+    margin-block-start: 2px;
+    margin-block-end: -4px;
     font-size: $font-size-small;
     line-height: $line-height-size-small;
   }

diff --git a/lib/_variables.scss b/lib/_variables.scss
@@ -6,29 +6,29 @@
 // 定义赫蹏根 class 名
 $root-selector: '.heti' !default;
 
-// 字体 Fonts
-/// 字体栈 Font Stacks
-$_font-stack-hei: "Pingfang SC", "Pingfang TC", "Heiti SC", "Heiti TC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei" !default;
-$_font-stack-song: 'Noto Serif','Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc, "Songti SC", "Songti TC", STSong, SimSun !default;
+/* 字体 Fonts */
+// 字体栈 Font Stacks
+$_font-stack-hei: "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei" !default;
+$_font-stack-song: "Songti SC", STSong, SimSun !default;
 $_font-stack-kai: "Kaiti SC", STKaiti !default;
 $_font-stack-sans: "Helvetica Neue", Helvetica, Arial !default;
 $_font-stack-serif: "Times New Roman", Times !default;
 $_font-stack-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier !default;
 $_font-stack-symbol: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 
-/// 字体族 Font Families
+// 字体族 Font Families
 $font-family-hei: $_font-stack-sans, $_font-stack-hei, sans-serif, $_font-stack-symbol !default;
 $font-family-song: $_font-stack-serif, $_font-stack-song, serif, $_font-stack-symbol !default;
 $font-family-kai: $_font-stack-serif, $_font-stack-kai, serif, $_font-stack-symbol !default;
 $font-family-mono: $_font-stack-mono, monospace, $_font-stack-symbol !default;
 
-/// 字重 Font Weights
+// 字重 Font Weights
 $font-weight-bolder: 800 !default;
 $font-weight-bold: 600 !default;
 $font-weight-normal: 400 !default;
 $font-weight-lighter: 200 !default;
 
-/// 字号 Font Sizes
+// 字号 Font Sizes
 $font-size-normal: 16px !default;
 $font-size-x-large: 20px !default;
 $font-size-large: 18px !default;
@@ -42,6 +42,7 @@ $font-size-h4: 18px !default;
 $font-size-h5: 16px !default;
 $font-size-h6: 14px !default;
 
+/* 行 Lines */
 // 行宽
 $line-length: 42em !default;
 
@@ -64,6 +65,7 @@ $line-height-size-h4: 24px !default;
 $line-height-size-h5: 24px !default;
 $line-height-size-h6: 24px !default;
 
+/* 段落 Paragraphs */
 // 标准网格单位变量 Standard Length
 // 垂直方向标准单位 = 标准行高
 // 水平方向标准单位 = 标准字号
@@ -73,13 +75,18 @@ $std-inline-unit: $font-size-normal !default;
 // 示例：缩进单位 = 二倍文字宽度
 $text-indent-length: 2em !default;
 
-// 开发用配置项 Develop Configs
+/* 栏 Columns */
+// 分栏
+$column-count-list: (1, 2, 3, 4) !default;
+$column-width-list: (16em, 20em, 24em, 28em, 32em, 36em, 40em, 44em, 48em) !default;
 
-/// 预设重置方案 "reset" | "normalize"
-/// reset：假定 Eric Meyer 的 CSS Reset 或其它流行的 Reset
-/// normalize：指定为 normalize.css
+/* 开发用配置项 Develop Configs */
+// 预设重置方案
+// `reset`：假定 Eric Meyer 的 CSS Reset 或其它流行的 Reset
+// `normalize`：指定为 normalize.css
 $_css-reset-scheme: "reset";
 
+/* 混合 Mix-ins */
 // Mix-in: Clear float
 @mixin clear-float {
   &::before,
@@ -105,4 +112,18 @@ $_css-reset-scheme: "reset";
 @mixin hang {
   position: absolute;
   line-height: inherit;
+  text-indent: 0;
+}
+
+/* 函数 Functions */
+// Function: batch prefix/suffix list-item
+// batch-fix-list((2, 3), '#{$root-selector}--columns-') => (.heti--columns-2, .heti--columns-3)
+@function batch-fix-list($list, $prefix: '', $suffix: '') {
+  $_list: () !default;
+
+  @each $item in $list {
+    $_list: append($_list, #{$prefix}#{$item}#{$suffix}, comma);
+  }
+
+  @return $_list;
 }