@flodesk/grain

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

Add grn-context class to a parent wrapper, this class sets dynamically the line-height and the letter-spacing. It can be added to a smaller UI section or to the page wrapper. Set 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);
}