Grain design system

Installation

npm install @flodesk/grain

Wrap your application root component with GrainProvider.

base.css contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.

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

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

Add text styles context

Apply the grn-context class to any wrapper. It sets the line-height dynamically. Use it on as many wrappers as needed.

In the future, once Grain is widely adopted, we will remove these classes and apply the text styles globally.

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

Usage

Component usage

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

<Text>Content</Text>;

CSS variable usage

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