叶片✨
最小 CSS 框架 页:1 语义 HTML
刀锋CSS是现代的接班人 Pico CSS 软件。 。 。 .
切换一下 pico.css 改为 blades.css- 还有!
快开始
有四个开始的方法:
A类. 手动安装
下载 CSS 归档 和链接 css/blades.css 输入 <head> 您的网站.
<link rel="stylesheet" href="css/blades.css" />
B类. 来自 CDN 的使用
<link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/blades.min.css
"/>
现场实例 : https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html 页面存档备份,存于互联网档案馆
CDN上的CSS文件完整列表:https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/
C C. 与国家预防机制安装
npm install @anyblades/blades
接下来, @import CSS 文件中的刀片 :
@import "@anyblades/blades";
或者,只导入所需的部件,例如每页或每个组件。 他们进来了 @layer blades,所以你的无层风格 胜过他们:
@import "@anyblades/blades/variables";
@import "@anyblades/blades/layout/document";
@import "@anyblades/blades/content/typography";
@import "@anyblades/blades/components/card";
@import "@anyblades/blades/components/modal";
variables财务报告和审定财务报表layout/document是最小值; 保持与 src/pico/ index.css (中文(简体) )。 。 。 .- 有些部分以其他部分为基础,例如:.
components/modal预期components/card,以及components/group财务报告和审定财务报表components/dropdown预期forms/basics财务报告和审定财务报表content/button。 。 。 . - 见 分层模块 ,并用捆绑器和组件框架(SvelteKit, Next.js, Nuxt, Astro,...)从JavaScript中导入.
- 见 软件包.json 用于列出所有出口部件.
D类. 正式启动
- https://github.com/buildingawesome-one/起动器 页面存档备份,存于互联网档案馆
- https://github.com/buildingawesome-one/examples 页面存档备份,存于互联网档案馆
- https://github.com/getgrav/grav-them-quark2 互联网档案馆的存檔,存档日期2013-12-22
- https://github.com/getgrav/grav-plugin-devtools (中文(简体) )
启动 HTML 模板
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<link rel="stylesheet" href="css/blades.css" />
<title>Hello world!</title>
</head>
<body>
<main class="container">
<h1>Hello world!</h1>
</main>
</body>
</html>
使用Nunjucks,Twig或液体? 检查一下内置 基础 HTML 模板 每个引擎,准备用于您的项目.
文档
如果你知道皮克,你已经知道刀锋:
没有闪光的黑暗模式
有了基于 Pico 的构建, Blades 默认遵循 OS 设置, 没有 JavaScript 和 没有闪光 (参见 暗图) (中文(简体) ). 要强制主题, 设置 data-theme="light" 或者说 "dark" 打开 <html>。在一个嵌入式元素上,当元素绘制出自己的背景时,例如 <article>; 否则添加 background-color: var(--pico-background-color); color: var(--pico-color);。 。 。 .
如果你坚持用户的选择,例如: localStorage 键 theme属性 在第一次油漆之前 内含小脚本 <head>,例如,在SvelteKit's src/app.html数字 :
<script>
try {
const theme = localStorage.getItem("theme");
if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
} catch {}
</script>
- 稍后设置,例如:
onMount或者说useEffect,使操作系统主题先切换. - 在Next.js App路由器布局中,通过与模板文字相同的代码,
<script dangerouslySetInnerHTML={{ __html: `try { … } catch {}` }} />,并添加suppressHydrationWarning改为<html>,因为属性在水合之前会改变.
缩合大小(可选入)
添加 <html data-compact> 对于整页,或者将属性放入单个元素上,例如. <form data-compact> 一个表格。 没有属性,没有什么变化.
- 在那里:
- 列入
blades.css - 也在
blades.layered.css - 每部分进口,加上
@anyblades/blades/compact其他部分之后 - 与
pico.conditional.css,添加@anyblades/blades/src/compact紧接着
- 列入
- 哪些变化:
- 较小的控制垫和1.5雷姆区块间距
- 0.5雷姆半径和3px焦点环
- 500重标签和按钮,600重标题
- 光模式下的白色字段背景
- 1px卡环而不是模糊的阴影,没有灰色卡片头/脚带
- 根字体大小 : 打开
<html>,它也将根字体大小保持在100%,而不是随取景口而增长. 在宽度为1280px时,控制为38px而不是62px. 在一个单一的元素上,它们大约是48px,因为每件东西都大小于rem而根相续. - 字段文本大小 : 窗体控件保持在16px, 因为低于iOS Safari 放大到焦点.