Home Reference Source

DETHER.IO Design System

UX guidelines, HTML/CSS framework, and React components working together to craft exceptional experiences at Dether.

Getting started

Install

$ yarn add @dether.io/dether-ui

Past this line in the header of the index.html file

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Usage

Colors

import Colors from '@dether.io/dether-ui/Colors';

console.log(Colors);

Typography

import { FontSize, LetterSpacing, FontFamily, FontWeight } from '@dether.io/dether-ui/Typography';

console.log(FontSize);
console.log(LetterSpacing);
console.log(FontFamily);
console.log(FontWeight);

Headings

import { H1, H2, H3, H4, H5, H6 } from '@dether.io/dether-ui/Headings'

const Title = (
  <div>
    <H1>Title h1</H1>
    <H2>Title h2</H2>
    <H3>Title h3</H3>
    <H4>Title h4</H4>
    <H5>Title h5</H5>
    <H6>Title h6</H6>
  <div>
)

const TitleUnderline = <H1 underline>Title h1</H1>

const TitleAlignCenter = <H1>Title h1</H1>
const TitleAlignRight = <H1 right>Title h1</H1>
const TitleAlignLeft = <H1 left>Title h1</H1>
const TitleAlignJustify = <H1 justify>Title h1</H1>

Text

import Text from '@dether.io/dether-ui/Text'

const Body1 = <Text variant="body1">
  Apparently we had reached a great height in the atmosphere...
</Text>

const Body2 = <Text variant="body2">
  Apparently we had reached a great height in the atmosphere...
</Text>

const Caption = <Text variant="caption">
  Apparently we had reached a great height in the atmosphere...
</Text>

const Button = <Text variant="button">
  Apparently we had reached a great height in the atmosphere...
</Text>

const Underline = <Text underline>
  Apparently we had reached a great height in the atmosphere...
</Text>

Margin

import { Margin, Padding } from '@dether.io/dether-ui/Margin';

console.log(Margin);
console.log(Padding);

Progress Bar

import ProgressBar from '@dether.io/dether-ui/ProgressBar';

const progressWithoutProps = <ProgressBar />

const progressWithProps = <ProgressBar percentage={75}/>

Contributing

$ git clone https://github.com/dethertech/dether-ui.git
$ cd dether-ui
$ yarn install
$ yarn test
$ yarn test:watch
$ yarn test:coverage
$ yarn run:storybook
$ yarn build:storybook
$ yarn lint
$ yarn build:esdoc
$ yarn publish:esdoc