法尔卡拉介绍
法尔卡拉介绍 基于效果 用于界面设计的TypeScript库. 它的每一种价值都取自既定标准,除了一个宣布的选择外,它的价值得到最广泛的取景,并拒绝任何破坏这些标准,以保持设计在尺度上的一致性.
它一直困扰着我们,大多数接口在断点时会改变跳跃的大小,而它们之间的每一个屏幕都会这样。 我们把每个值都与共同比率挂钩,这样,每个值都与其余值同步平稳地增长。 每一个屏幕直到桌面都得到自己的值,甚至无人设计的值.
决定从每个数字转移到说明意图的少数选择。 由这种意图而产生的一切,都是一劳永逸的,并带着它的道理,所以,它没有任何一个取决于任何人的口味。 任何会留下读者的值都无法到达屏幕。 剩下的部分值得争论:界面应如何感受.
焦点
没有什么比流体类型尺度更能说明这个想法. 有三个选择是进出,要么是整个尺度,要么是对任何超过标准的东西的精确否定.
import { Effect, Rational } from 'effect';
import * as Fluid from '@falkara/presentation/Fluid';
import * as Typography from '@falkara/presentation/Typography';
// Intent: how sharply headings rise on narrow and wide screens, and how large body text gets.
const intent = {
minimumFactor: Rational.makeUnsafe(6n, 5n),
maximumFactor: Rational.makeUnsafe(5n, 4n),
maximumBodyFontSize: Rational.fromBigInt(20n), // CSS pixels
};
Effect.gen(function* () {
const steps = yield* Typography.scale(intent);
return yield* Effect.forEach(steps, Fluid.clamp);
});
// Success: [
// 'clamp(0.83333rem, 0.77778rem + 0.27778vw, 1rem)', position −1
// 'clamp(1rem, 0.91667rem + 0.41667vw, 1.25rem)', position 0, body text
// …
// 'clamp(2.98598rem, 2.39185rem + 2.97065vw, 4.76837rem)', position 6
// ]
Typography.scale({ ...intent, maximumBodyFontSize: Rational.fromBigInt(30n) });
// Failure: SchemaError(Expected a body font size of at most 25.6 px, so that text can be enlarged
// to 200 %, as WCAG 2.2 Resize Text requires, within the 300 % page zoom of Safari, the lowest
// maximum among the Baseline core browsers
// at ["maximumBodyFontSize"])
无效果 同一调用返回一个立即读取的纯值 .
import { Exit, Option } from 'effect';
const scale = Typography.scale(intent);
if (Exit.isSuccess(scale)) {
scale.value; // the steps
} else {
Option.getOrUndefined(Exit.findErrorOption(scale))?.message; // every reason, each followed by its path
}
按照JSON读取的意向保留在同一种图案的JSON编码上,每个数字以字符串写成分数或整数.
import { Schema } from 'effect';
Schema.decodeUnknownExit(Schema.toCodecJson(Typography.ScaleOptions))(
JSON.parse('{ "minimumFactor": "6/5", "maximumFactor": "5/4", "maximumBodyFontSize": "20" }'),
);
// Success: the same intent, ready for Typography.scale
每个模块导出方案, 例如 Typography.ScaleOptions,在“效果”之外与验证者合作 Schema.toStandardSchemaV1。 。 。 .
模块
- 类型 将三个选择变成流体类型尺度,其中每个步骤都保持可重塑.
- 空间 与身体文本的每一个空白都来自同一意图.
- 颜色 对照所携带的文字大小测量每一对,并找到品牌颜色最能辨识的阴影.
- 版式 将行按到遵循字体的长度.
Viewport, Longers and Coloriometry 持有其余存在的事实,而Fluid将数值写成随着 Viewport 增长的 CSS 长度.
每个模块都精确工作,没有浮动点: Rational effect 的数,对于一个不合理的数,如根,对数或同位素,在每次决定确定之前,其范围会缩小. 精确性花费时间,毫秒,其中浮点取微秒,所以库是用于构建时间的,每次工作一次并将其写为CSS,而不是用于浏览器.
基础工作
我们只依靠业界已经同意的,让其中少数人解决所有不是品味问题的决定.
网络平台
事实和观点是建立在其中的。 只有每个 Basin 核心浏览器中每个读取器所持有的事实被保存下来,观点让位于衍生值,但一个宣布的选择除外:最大取景宽度为1280px,因为WCAG没有设置,而流体值需要保持可重现.
西非咨询组
对读者的承诺已记录在案。 价值观使每一项承诺都能够兑现,这远远超出了欧盟《欧洲无障碍法》和美国《康复法》第508条的要求.
数值符合WCAG 2.2至AA级的成功标准,由它们决定:文本对比(增强),文本大小调整,回流,文本间距和视觉演示. 它们未经决定就提供的标准,例如接口组件和焦点指标的对比或目标大小,都与使用它们的接口相配合.
美国
公约通过活下来的实际使用赢得信任。 只有在准则沉默和只从USWDS 3 借用价值, 设计系统 美国政府建立网站,支持数十个机构和近200个网站.
乌托邦
好模型让困难的事情变得简单。 值跟随Utopia 对于流体类型和空间,将其从下面的地层控制到每个极限.
许可证
Falkara 演示许可证 麻省理工学院。 。 。 .
谷歌的基线标志,根据 CC BY-ND 4.0 (英语)。 。 。 .