前端基金会

内容提要

关于这些文件,您可找到以下专题:

• 说明
• 所需资源
• 安装
• 在你开始之前
  • 屏幕断点和媒体查询
  • 默认主题
• 构成部分
  • 电瓶技术主题
  • 行数
  • 栏
  • 中间
  • 类型
• 助教课程
  • 颜色
  • 边距
  • 铺垫
  • 定位
• 生成自己的主题

说明

这些地基是一组组件,供开发者方便地复制设计者使用的地基 位置、对齐、样式和结构.

它包含一系列严格的组件,应当始终用于你的开发,因为它遵循的是 Bolttech 设计页面指南.

所需资源

• 节点.js 16.0+ (韩语)
• 反应 18.2+ (单位:千美元)
• 样式组件 6个+

安装

安装 frontend-foundations 软件包,包含以下命令:

npm i @bolttech/frontend-foundations

关于发展环境:

git clone [email protected]:gofrank/frontend-foundations.git
cd frontend-foundations
npm install
npm run storybook

在你开始之前

在开始之前,你应该知道两点是这个项目的基础. 这些要点是与设计小组共同界定的,以便建立一个基本结构 应跟踪每次设计和开发新的组件和网页这些要点是:

屏幕断点和媒体查询

地基内部的所有组件都遵循了我们的断点规则. 这些规则后来也用于您根据当前屏幕的断点提供某些组件的特定尺寸。 这些断点是:

这么说,你应该输入我们的 media-queries 基于这些断点,在开发页面时,可以更好地遵循网格指引.

示例

import styled from 'styled-components';
import { MediaQueries } from '@bolttech/frontend-foundations';

export const MyComponent = styled.div`
  display: flex;
  flex-direction: row;
  background-color: red;


  @media ${MediaQueries.LG} {
    background-color: green;
  }

  @media ${MediaQueries.SM} {
    flex-direction:column
  }
`

默认主题

地基有颜色、花纹、相距、打字和道具的预设 default theme 或者说 bolttech theme。 。 。 .

以下是主题的结构:

type bolttechTheme = {
  colors: ColorsType;
  spacing: SpacingType;
  typography: TypographyType;
  effects: EffectType;
  components: Record<string, unknown>;
  tokens?: Record<string, unknown>;
};

构成部分

电瓶技术主题

这个 BolttechThemeProvider 组件是 ThemeProvider 从样式组件。 它允许你注射 主题 在树上.

我们 ThemeProvider 和风格的组件不同 因为我们期望一个主题 具有一个定义的结构, 也有一个默认的主题 与布尔特克风格.

如果你想,你可以导入我们 默认主题 编辑 主题类型 并随想而用.

示例

import { BolttechThemeProvider, bolttechTheme } from '@bolttech/frontend-foundations';

const MyApp = () => (
  <BolttechThemeProvider theme={bolttechTheme}>
    <App />
  </BolttechThemeProvider>
);

export default MyApp;

重要内容: 如果你打算使用任何组件 Bellow,你 需求 用 BolttechThemeProvider 因为我们的组件使用带有预定义结构的设计符号,所以您需要提供带有该类型的主题 BolttechThemeType。 。 。 .

方框

Box组件是用于React应用的多功能容器组件,旨在提供灵活的造型和布局选项. 它接受各种道具来定制它的外观和行为.

反应框组件

概览

这个 Box 组件是用于反应应用的多功能容器组件,旨在提供灵活的样式和布局选项。 它接受各种道具来定制它的外观和行为.

使用量

import { Box } from '@bolttech/frontend-foundations';

// ...

const MyComponent = () => {
  return (
    <Box
      sizes={{ xs: 100, sm: 100, md: 100, lg: 100 }} /* Optional */
      className="flex pt-l"
      removeGridPadding
      removeGridGap
    >
      {/* Your content goes here */}
    </Box>
  );
};

道具

参考文件转发

这个 Box 组件支持 转发您可以使用 ref 以引用基础 div 键.

const myRef = useRef();

<Box ref={myRef}>Content</Box>;

行数

这个 Row 构成部分基本上是a div 将组件包装为一个弹性容器,应用我们的基本样式 设计网格系统。 。 。 .

它有一个 最大宽度为 1440px页:1 列之间的间隔 财务报告和审定财务报表 列两侧的挂起. 空隙和补丁的价值基于我们的网格系统的断点.

道具

示例

import { Row } from '@bolttech/frontend-foundations';

<Row fullWidth={true} fullHeight={true} center={false} className="mb-xs">
  <ChildComponent />
</Row>;

栏

这个 Column 组件是使用 宽度百分比 以定义容器的大小。 设计师和devs需要意识到每个屏幕断点都有需要填充的大小. 每个断点的可能性如下:

道具

示例

import { Column, Row } from '@bolttech/frontend-foundations';

const MyComponent = () => (
  <Row>
    <Column size={{ xs: '100%', sm: '33.333%', md: '50%', ld: '50%' }}>Hello</Column>
    <Column size={{ xs: '100%', sm: '66.666%', md: '50%', lg: '50%' }}>World</Column>
  </Row>
);

中间

这个 Center 其组成部分是一个基本组成部分,它包罗着儿童组成部分和中心.

示例

import { Center, Column, Row } from '@bolttech/frontend-foundations';

const MyComponent = () => (
  <Row>
    <Center>
      <Column size={{ xs: '50%', sm: '50%', md: '50%', lg: '50%' }}>World</Column>
    </Center>
  </Row>
);

类型

这个 Typography 是一个文本组件,可以假设许多大小,由设计团队根据其中的符号来决定 主题文件夹下的打字文件请提供有效的组合 variant 财务报告和审定财务报表 type 基于此文件.

道具

说明: 取决于什么 type 财务报告和审定财务报表 variant 你提供 Typography 构成部分将 生成不同的 HTML 元素。 。 。 .

示例

import { Typography } from '@bolttech/frontend-foundations';

const MyComponent = () => (
  <Typography variant="primary" type="body">
    Welcome to bolttech!
  </Typography>
);

此外 Typography 组件可以使其文本中的链接。 要渲染链接,您应该像普通的Markdown文件中那样通过,例如:

const MyComponent = () => (
  <Typography variant="primary" type="body">
    normal text [text to render as link](https://google.com)(blank|download)
  </Typography>
);

注意最后一个参数是可选的. 如果你不通过它,它会打开链接在同一标签上

助教课程

为了帮助您的页面的开发与造型,我们决定增加帮助者课程,用于 颜色、垫和边距 正如我们所知道的那样,仅仅为添加这些属性而创建有风格的组件不是一个有趣的任务.

所有这些类都是根据您主题配置所提供的符号的颜色、间隔和弹性框属性创建的

说到这里,我们有一套基本的课程,我们提供:

颜色

基于主题的结构,我们创建了带有前缀的班级 text-, (中文(简体) ), bg- 财务报告和审定财务报表 fill- 并附加主题提供的颜色。 例如,如果您有以下颜色的主题:

colors: {
  content: {
    accent: tokens.cyan['700'],
    base: tokens.navy['700'],
    subtle: tokens.navy['500'],
    weak: tokens.navy['400'],
    // ...
  }
}

我们将为您的全球风格设置以下课程:

.text-content-accent {
  color: #00bac7;
}
.bg-content-accent {
  background-color: #00bac7;
}
.fill-content-accent {
  fill: #00bac7;
}

.text-content-base {
  color: #170f4f;
}
.bg-content-base {
  background-color: #170f4f;
}
.fill-content-base {
  fill: #170f4f;
}
/* ... */

边距

基于主题的结构,我们创建了带有前缀的班级 mt-, (中文(简体) ), mb-, (中文(简体) ), ml-, (中文(简体) ), mr-, (中文(简体) ),mh-, (中文(简体) ),mv-,以及 m-,并附加您主题提供的边距。 因此,例如,如果一个主题有以下边距:

spacing: {
  flexbox: {
    XXS: '8px',
    XS: '16px',
    S: '24px',
    M: '32px',
    // ...
  },
}

我们将为您的全球风格设置以下课程:

.mt-xxs: {
  margin-top: 8px;
}
.mb-xxs {
  margin-bottom: 8px;
}
.ml-xxs {
  margin-left: 8px;
}
.mr-xxs {
  margin-right: 8px;
}
.mh-xxs {
  margin-left: 8px;
  margin-right: 8px;
}
.mv-xxs {
  margin-top: 8px;
  margin-bottom: 8px;
}
.m-xxs {
  margin: 8px;
}

铺垫

基于主题的结构,我们创建了带有前缀的班级 pt-, (中文(简体) ), pb-, (中文(简体) ), pl-, (中文(简体) ), pr-, (中文(简体) ),ph-, (中文(简体) ),pv-,以及 p-,并附上由您的主题提供的垫片。 例如,如果您有一个主题, 上面有以下标签:

spacing: {
  padding: {
    NONE: '0px',
    XXXS: '2px',
    XXS: '3px',
    XS: '4px',
    S: '8px',
    // ...
  },
}

我们将为您的全球风格设置以下课程:

.pt-xxs: {
  padding-top: 8px;
}
.pb-xxs {
  padding-bottom: 8px;
}
.pl-xxs {
  padding-left: 8px;
}
.pr-xxs {
  padding-right: 8px;
}
.ph-xxs {
  padding-left: 8px;
  padding-right: 8px;
}
.pv-xxs {
  padding-top: 8px;
  padding-bottom: 8px;
}
.p-xxs {
  padding: 8px;
}

/* ... */

定位

我们还希望为人们提供一个方便的方法,在页面上定位元素,而无需仅仅为定位而创建自定义的有风格的组件. 因此,我们也为您的全球风格注入这些课程:

.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.flex-shrink-1 {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex: 1;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-basis-0 {
  flex-basis: 0;
}
.flex-basis-1 {
  flex-basis: auto;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-right {
  align-items: flex-end;
}
.align-self-stretch {
  align-self: stretch;
}
.align-self-center {
  align-self: center;
}
.align-self-start {
  align-self: start;
}
.align-self-end {
  align-self: end;
}
.justify-left {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-right {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-arround {
  justify-content: space-arround;
}
.min-content {
  width: min-content:
}
.max-content {
  width: max-content:
}

/* ... */

类型

生成 CSS 类,用于整个应用程序中可以应用的打字,确保按指定主题的打字风格的一致性。 它满足不同的文本元素,如标题,正文,以及移动和桌面断点的标签.

参数

• theme: ThemeType: 包含打字设置的对象 typography 用于移动和桌面的属性,每个包含 headings, (中文(简体) ), body,以及 label。 。 。 .

回返

包含主题对象所指定的打字变体 CSS 类定义的字符串 .

使用量

确保您的主题对象结构包含 typography 移动和桌面的设置,详细样式用于 headings, (中文(简体) ), body,以及 label。 。 。 .

const theme = {
  typography: {
    mobile: {
      headings: { /* styles */ },
      body: { /* styles */ },
      label: { /* styles */ },
    },
    desktop: {
      headings: { /* styles */ },
      body: { /* styles */ },
      label: { /* styles */ },
    },
  }
};

调用 createTypographyClasses 有主题对象 :

const typographyClasses = createTypographyClasses(theme);

示例 CSS 输出

.ty-headings-h1 {
  font-weight: 700;
  line-height: 1.2;
  font-size: 2rem;
  letter-spacing: 0.5px;
}
/* Additional classes for body, label, and other headings */

弹性框缺口

生成 CSS 类,用于控制弹性框布局中的空白,使用主题对象所定义的弹性框符号值. 它支持不同缺口大小的自定义前缀,允许更灵活的设计系统.

参数

• theme: ThemeType: 在 tokens.flexbox 属性.

• prefix = '':一个可选的字符串参数,用于前缀生成的类名,允许定制并避免命名冲突. 示例前缀:"sm:","md:","lg:".

回返

一系列字符串,每个字符串都代表 CSS 类定义,根据主题的flexbox 符号值对空隙,行格和列格进行定义.

使用量

确保您的主题对象包含下方的灵活框符号值 tokens.flexbox。 。 。 .

const theme = {
  tokens: {
    flexbox: {
      xss: '4px',
      xs: '6px',
      s: '8px',
    }
  }
};

调用 createGapClasses 有主题对象,如果需要,则有一个可选的前缀。 下面用"sm:","md:"和"lg:"前缀表示不同的缺口大小:

const smallGapClasses = createGapClasses(theme, 'sm:');
const mediumGapClasses = createGapClasses(theme, 'md:');
const largeGapClasses = createGapClasses(theme, 'lg:');

示例 CSS 输出

.sm:gap-s {
  gap: 8px;
}
.sm:rg-s {
  row-gap: 8px;
}
.sm:cg-s {
  column-gap: 8px;
}
/* Additional classes for medium "md:" and large "lg:" gaps */

响应

在台基上,我们也为您提供了一种基于屏幕大小的组件样式,处理反应的方法. 对于用于样式组件的每个类,也可以针对特定的屏幕大小,简单地添加您想要针对的屏幕大小的前缀.

我们的方法是 移动电话 因此请注意,如果你提供一个没有前缀的类,它将适用于所有屏幕大小,但例如,如果你提供一个叫作 md:pt-xs 它会应用类 pt-xs 到屏幕大小 md 较大说吧! 如果您想要只添加到特定屏幕大小中, 您需要添加另一个类目标屏幕大小比您所选择的更大 .

<Row className="pb-m sm:pb-s md:pb-xs lg:pb-xxs md:flex-grow-0 md:justify-between">
  <Column size={{ xs: '100%', sm: '33.333%', md: '50%', ld: '50%' }}>Hello</Column>
  <Column size={{ xs: '100%', sm: '66.666%', md: '50%', lg: '50%' }}>World</Column>
</Row>

生成/更新您自己的主题

如果你需要更新主题或创建新主题,请看看我们 主题生成器 cli 工具.