Thermal-ui NPM

Thermal UI Components

:fire::fire::fire:

npm install react styled-components react-router-dom@next thermal-ui

Standard display components to build your app in the cleanest way possible.

<Container flex flexColumn padded>
  children
</Container>

<Column smCol={12} mdCol={12} lgCol={12}>
  children
</Column>

<Row>
  <Column></Column>
  <Column></Column>
  <Column></Column>
</Row>

A set of wrappers to create consistent and styled text, no matter the screen

<Hero right center color="#F9F9F9">
  Lorem Ipsum Hero
</Hero>

<Headline right center color="#F9F9F9">
  Lorem Ipsum Headline
</Headline>

<Title right center color="#F9F9F9">
  Lorem Ipsum Title
</Title>

<Subtitle right center color="#F9F9F9">
  Lorem Ipsum Subtitle
</Subtitle>

<Text right center color="#F9F9F9">
  Lorem Ipsum Text
</Text>

<Button primary color="#FFF">button text</Button>

<Icon />

<BottomBar>
  Something in the bottom bar <Button>button too</Button>
</BottomBar>

<Breadcrumb />

<Button>
  <Dropdown />
</Button>

<Icon>
  <Dropdown />
</Icon>

<Input type="string:default" />

<Card title="some string">
  something in the card
  <CardActions actions={{'some action': function() { /* something */}}}/>
</Card>

Some gotcha's while updating/extending.

If you don't spread the props out of and into the styled component then you're going to have a bad time. This creates a bad diff tree for react but it can deal better than you pulling your hair out if you're using this library in another project and can't override a prop or add a className.