共同基金会
我们的地基是设计基础,我们把产品建立在设计基础之上.
我们利用基础来帮助创造我们的要素和组成部分。 当我们保持我们的基础一致, 我们的产品看起来和感觉一致的顾客.
结构和内容
地基由基线CSS样式,字体,自定义属性和公用分类等组合而成. 我们把它们分为以下几类:
- 基础
- 颜色
- 版式
- 间距
- 类型
- 用户
使用量
安装
npm install @coopdigital/foundations
建议:进口所有物品
@import "@coopdigital/foundations/dist/vars/vars.css";
@import "@coopdigital/foundations/dist/foundations.css";
这是最容易得到你需要的一切的方法.
导入部分
如果您只需要部分地基,您可以使用下面的导入。 确保保持结构 以确保级联工程.
/* Variables */
/* Colours */
@import "@coopdigital/foundations/dist/vars/colors.css";
@import "@coopdigital/foundations/dist/vars/colors-cls.css";
@import "@coopdigital/foundations/dist/vars/colors-membership.css";
/* Typography */
@import "@coopdigital/foundations/dist/vars/typography.css";
/* Spacing */
@import "@coopdigital/foundations/dist/vars/spacing.css";
/* UI */
@import "@coopdigital/foundations/dist/vars/ui.css";
/* Base */
@import "@coopdigital/foundations/dist/base/base.css";
/* Typography */
@import "@coopdigital/foundations/dist/typography/typography.css";
/* Layout */
@import "@coopdigital/foundations/dist/layout/grid.pcss";
/* UI */
@import "@coopdigital/foundations/dist/ui/a11y.css";
@import "@coopdigital/foundations/dist/ui/logo.css";
@import "@coopdigital/foundations/dist/ui/icons.css";
/* Utilities */
@import "@coopdigital/foundations/dist/colors/colors-utilities.css";
@import "@coopdigital/foundations/dist/colors/cls/colors-utilities-cls.css";
@import "@coopdigital/foundations/dist/colors/membership/colors-utilities-membership.css";
@import "@coopdigital/foundations/dist/typography/typography-utilities.css";
@import "@coopdigital/foundations/dist/spacing/spacing-utilities.css";
@import "@coopdigital/foundations/dist/layout/layout-utilities.css";
图标使用
图标作为单独的 SVG 文件在 src/ui/icons 并合并为名为 SVG 的 SVG 图案 coop-icon-sprite.svg。该图示在 src/assets/icons/coop-icon-sprite.svg 复制到 dist 由构建脚本.
此图案可以从 node_nodules 从内部 foundations/dist/assets/icons/coop-icon-sprite.svg,使用您选择的构建过程.
使用您的工程中的图标
一旦前端装入了图标,您可以通过使用:
<svg>
<use xlink:href="coop-icon-sprite.svg#[icon-file-name]"></use>
</svg>
例如,购物篮图标将使用:
可用图标
如果可能的话,您应当尽量按照 图书馆关于图标的准则
如果图标与文本对齐,则被归类为装饰性,并且可以从屏幕阅读器中隐藏.
<p>
<svg aria-hidden="“true”">
<title>Basket</title>
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use>
</svg>
Basket
</p>
如果无法将图标与文本配对,则不需要隐藏的aria-hidden属性.
<svg role="img">
<title>Basket</title>
<use xlink:href="coop-icon-sprite.svg#icon-basket"></use>
</svg>
支助科
有一些 CSS 类来空间和大小图标. 作长方形的相机取一个修饰类来将宽度增加一倍.
.coop-i {
fill: currentColor;
margin: 20px;
width: 32px;
height: 32px;
}
.coop-i--scooter {
width: 64px;
}
由 ID 提供的图标完整列表
#icon-add
#icon-minus
#icon-arrow-up
#icon-arrow-down
#icon-arrow-left
#icon-arrow-right
#icon-chevron-up
#icon-chevron-down
#icon-chevron-left
#icon-chevron-right
#icon-avatar
#icon-avatar-alt
#icon-basket
#icon-clock
#icon-close
#icon-close-alt
#icon-coop
#icon-coop-card
#icon-location
#icon-coop-location
#icon-download
#icon-home
#icon-information
#icon-mail
#icon-menu
#icon-message
#icon-open-new
#icon-phone
#icon-question
#icon-search
#icon-settings
#icon-tick
#icon-tick-alt
#icon-van
#icon-warning
#icon-write
#icon-pencil
#icon-calendar
#icon-scooter