谷物设计系统

安装

npm install @flodesk/grain

用 Grain Provider 包装您的应用根组件 .

base.css 包含所有的谷物全球样式。 以尽可能高的组件导入,使其在UI中能无所不入.

import { GrainProvider } from '@flodesk/grain';

function Demo() {
  return (
    <GrainProvider>
      <App />
    </GrainProvider>
  );
}

添加文本样式上下文

应用 grn-context 类到任何包装。 它设定 line-height 充满活力 用在需要的包装上.

将来,一旦"谷物"被广泛采用,我们将去掉这些类,在全球应用文字风格.

<div className="some-wrapper grn-context">
  <Text size="l">Content</Text>
  // or
  <div className="element-with-grain-styles">Content</div>
</div>

使用量

构成部分使用

import { Text, Button, Input } from '@flodesk/grain';

<Text>Content</Text>;

CSS 可变用途

.dashboard-header {
  font-size: var(--grn-text-xl);
  margin-bottom: var(--grn-space-l);
  color: var(--grn-color-content2);
}