沙姆米德风格 - 
这个软件包提供了用于CSS的字符串常数的集合,包含非GEL的造型细节,这些细节会针对特定的BBC服务和产品
出口
/colours - 多个 Psammead 组件或主题所需的工程定义颜色。 这些颜色不是由GEL定义的.
/detection - 项目确定的CSS特性检测说明.
/fonts - Reith字体的自定义浏览器行为。 这些主要理由不被认为是GEL定义(而不是GEL的一部分) @bbc/gel-foundations)是由于自定义的加权和加载定义所致. 关于本套件所定义的字体面的更详细情况,请在此查阅.15. 还包括世界服务社所有字体的申报.
/font-styles 提供了可用于获得不同服务的字体样式的函数。 如果字体样式不可用,则所有功能都将回落到服务的正则 sans字体样式.
/global-styles 提供工程定义的全局样式 styled-normalize 和箱尺寸.
安装
npm install @bbc/psammead-styles --save
使用量
import { C_POSTBOX } from '@bbc/psammead-styles/colours';
import { F_REITH_SANS_REGULAR, F_REITH_SANS_ITALIC } from '@bbc/psammead-styles/fonts';
通过导入此软件包定义的字体面定义的子集,您只能优先排列您项目最常用的字体, 浏览器样式会为不太常见的情景而介入 。 例如,在这些例子中,只为Reith Sans Prent和Italic导入自定义字体,任何粗体的造型都会被浏览器所"虚构".
您可能想要与 GEL 定义的字体堆栈定义一起使用这些字体面定义,这些定义可用于 @bbc/gel-foundations数字 :
import { GEL_FF_REITH_SANS } from '@bbc/gel-foundations/typography';
然后这些值可以在代码中的CSS声明中直接使用. 注意字体面只应在一页上声明一次:
import { css } from 'styled-components';
// These should only be included on your page once.
const someGlobalCSS = css`
${F_REITH_SANS_REGULAR};
${F_REITH_SANS_ITALIC};
`;
const SomeStyledComponent = css`
background-color: ${C_POSTBOX};
font-family: ${GEL_FF_REITH_SANS};
`;
字体样式
如果您正在使用嵌入式字体, 您需要先确保您已经装入了您的字体, 然后再使用这些函数 。 如果嵌入字体未加载,则将应用倒置字体
import { getSansRegular } from '@bbc/psammead-styles/font-styles';
const fontStyle = getSansRegular('news');
const SomeStyledComponent = css`
${fontStyle};
/* more css styles */
`;
检测
我们定义了自定义特性检测语句( 使用 CSS ) @supports 语法),为浏览器特定错误提供工作变通.
- 网格: 我们曾经遇到过使用
@supports (display:grid)从带有 Buggy CSS Grid 执行功能的浏览器中找到此检测@supports (grid-template-columns: fit-content(200px))更一致的检测.
import { grid } from '@bbc/psammead-styles/detection';
const someGridUsingComponent = css`
@supports (${grid}) {
display: grid;
/* grid CSS */
}
/* fallback CSS */
`;
全局风格
我们导出一个使用 styled-normalize 并定义 css 规则 box-sizing。 。 。 .
此组件接受可选 fonts prop 是用于全局样式的字体样式阵列.
import GlobalStyles from '@bbc/psammead-styles/global-styles';
import {
F_REITH_SANS_REGULAR,
F_REITH_SERIF_MEDIUM,
} from '@bbc/psammead-styles/fonts';
<GlobalStyles fonts={[
F_REITH_SANS_REGULAR,
F_REITH_SERIF_MEDIUM,
]}
/>
捐款
何时 添加 向此工具包新导出 出口测试 还需要更新。 何时 删除 从此工具包中导出 出口测试 软件包版本需要更新,需要作重大修改(EG:1.2.1 - > 2.0.0),因为这将被视为由于功能被去除而导致的突破性修改.
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .