magick.css

by winterveil

在宇宙知识的大全中，众所周知，巫师的涂鸦不仅超越了世俗，而且毫无疑问，是已知的类人种类中最令人兴奋的记号方式。因为谁能抵挡住在页边留下的一个好放的咒语的诱惑呢？

Albus Greybeard, On the Virtues of Mystical Marginalia, 1132

基础知识

magick.css是一个极简的，（大部分）无类的CSS框架，它的设计目标是易于使用和理解。它包含在一个文件中，每一个选择都有注释。目标是实现优雅，但神奇的游戏外观，同时最大化可读性和传达信息的能力；有点类似于巫师的笔记。

该框架在所有设备和屏幕尺寸上保持其美观和功能，并且完全无需JavaScript。它的灵感来源于LaTeX，老式的TTRPG规则书，像concrete.css 和 Tufte CSS这样的CSS框架，以及"设计即可用性" 的极简主义原则。

如何使用 magick.css

想要在你的项目中尝试 magick.css 最简单的方式就是通过 CDN 添加。只需将这两行代码添加到你的 html <head> 中：

<link rel="stylesheet" href="https://unpkg.com/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/magick.css">

你也可以直接从这个仓库下载 magick.css 文件，然后像平常一样将它包含到你的 html <head> 中：

<link rel="stylesheet" href="path/to/magick.css">

你也可以像这样将 magick.css 添加到你的 JS 项目中：

npm install normalize.css magick.css

然后在你的代码中导入它们：

import 'normalize.css'
import 'magick.css'

对于更进一步的内容：magick.css 应该可以在任何 HTML5 文档中工作，因为它99%的部分是无类的。不过，你可以使用一些很酷的特性；只需向下滚动就可以发现它们！

布局

如果你想让你的页面结构化为一个响应式、可读的列，将所有的内容包裹在 <main> 标签中，然后使用 <section> 标签将长篇内容分成几个部分。这个页面就是一个很好的示例。

(当然，你也可以忽略这个建议，只使用 magick.css 来进行排版和样式化组件。)

下面是一个常见结构的简单示例：

<html>
  <head>
  </head>
  <body>
    <main>
      <header> </header>
      <section> </section>
      <section> </section>
      <section> </section>
      <footer> </footer>
    </main>
  </body>
</html>

为了添加相关信息，magick.css 使用了 <aside> 标签。你会发现这个页面时不时地使用了它。如果你想详细说明一个观点，或者提供额外的上下文，你可以使用 magick.css 的旁注。旁注会自动编号！你可以在下面的额外内容部分了解更多关于这个的信息。

排版

这里展示了 magick.css 提供的排版：

标题 1：大胆而宏伟的标题，故事的大门。

标题 2：下面的副标题，章节在此等待。

标题 3：低声密语的秘密，情节在此加厚。

标题 4：分享细节，信息清晰。

段落流动，文字如河，

链接如门户，我们接下来会去哪里？

坚如磐石，我们的话语坚定，

强调的低语，轻轻落地。

下划线的秘密，微妙的暗示，

小而强大，我们的话语被铸造。

代码以逻辑说话，清晰整洁，

排版的魔法，现在完成。

magick.css 不会对 <h4> 以下的标题进行样式设置；它们通常不需要进行层次结构设置，而是用于非常特定的用例。所以如果你需要它们，你可以按照你认为合适的方式进行样式设置。

[这是] 值得注意的，费曼讲座 [...] 在1800页中写了所有的物理知识，只使用了2级的层次标题：章节和文本中的A级标题。

Edward Tufte, foum post, ‘Book design: advice and examples’ thread

结构化内容

列表

列表保持简单，以免分散内容：

这是...
... 一个无序列表。

这是...
... 一个有序列表。

这个奇怪的家伙...: ... 是一个描述列表。

表格

与列表类似，表格清晰简洁，引导读者关注手头的数据：

药剂	主要成分	催化剂
露光露	发光藻（81mg）	🜼
浮叶	蒲公英絮（61mg）	🝆
力量酿	人参根（78mg）	🝀
消失草稿	含羞草（26mg）	🜞
记忆茶	银杏叶（39mg）	🜇

媒体 & 图像

媒体元素如图片和视频可以独立存在，也可以作为一个图像进行展示，为你的内容提供结构和优雅，同时通过标题添加上下文。

独立的

让我们从一个独立的 <img> 元素开始。它不会被拉伸或扭曲，但会以其自然大小显示；只要有足够的空间：

在图像中

使用一个 <figure> 元素，我们可以更突出地显示媒体元素，并且还可以使用 <figcaption> 标签添加一个标题：

代码，引用和预格式化

代码

显示代码可以内联或在一个独立的块中完成。要内联代码，使用 <code> 标签。对于更大的代码片段，使用 <pre> 来包裹 <code> 标签。顺便说一下，你也可以使用图形来显示代码片段！

123456789void fib(int x) {
    unsigned long a = 0, b = 1, c;
    for(int i = 0; i < x; i++) {
        printf("%lu ", a);
        c = a + b;
        a = b;
        b = c;
    }
}

这个C函数生成斐波那契数列的数字。

(代码的行号标注需要对内容进行一些额外的预处理，但这很简单，甚至可以手动完成。在额外部分找出如何操作。)

引用

对于引用，使用<blockquote>标签。根据内容，你可能想要使用预格式化的文本或让浏览器处理格式：

这是四月里一个明亮而寒冷的日子，钟声正敲响十三点。

George Orwell, 1984

在引用中添加引文是通过在引用中使用<footer>来完成的。只需查看此页面的源代码即可看到如何操作！

现在让我们考虑一首诗，其中的格式很重要，不能由浏览器动态确定。在这种情况下，我们将诗的内容包裹在<pre>标签中：

天使们在天堂中并不如此快乐，他们嫉妒她和我—— 是的！——这就是原因（正如所有人所知，在这个海边的王国）风从云中吹出，冷冽并杀死了我的安娜贝尔·李。

额外

你可以使用magick.css的一些额外功能。这些需要特殊的类，因此不是magic.css的主要功能部分。本节将向你展示可用的额外功能，以及如何使用它们。

旁注 & 自动编号

旁注这是一个旁注！在移动设备上，它被推入主列。是向你的内容添加额外信息的好方法。要在你的文本中添加旁注，需要做两件事：

在旁注引用的地方添加一个锚：
<span class="sidenote-anchor"></span>
在锚点后面添加旁注本身：
<span class="sidenote">旁注内容。</span>

代码/预格式化行号

要在代码/预格式化块中显示行号，你需要插入一个 <span>，包含行号。根据你的偏好，这可以手动完成，使用 JavaScript，或在服务器端完成。这是一个例子：

12345#include 
int main() {
   printf("Hello, World!");
   return 0;
}

这是通过以下源代码实现的：

<pre><span class="line-number"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></span><code>#include <stdio.h>
int main() {
    printf("Hello, World!");
    return 0;
}</code></pre>

就是这样！

我希望我能引起你对使用magick.css的兴趣。如果你喜欢你看到的，请考虑在GitHub上给它一个星标。这不花费你任何东西，而且让我知道有人在关心！

如果你对我构建的其他东西感兴趣，欢迎加入我的Discord！