How to Use

To start, do something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { GlobalStyle, Theme } from 'cathode';
import App from './App'; // Your web app

ReactDom.render(
  <Theme>
    <GlobalStyle />
    <App />
  </Theme>,
  document.getElementById('root')
);

Mood

Available moods are primary, secondary, tertiary, info, success, warning, error. Some components only implement some of these moods. For instance:

| Component | Moods | | --- | --- | | Button | primary, secondary, tertiary, info, success, warning, error | | Message | info, success, warning, error |

Size

Cathode uses xxs, xs, sm, md, lg, xl, xxl or none for sizing values.

| Property Group | Possible Values | | --- | --- | | Gutter | none, xxs, xs, sm, md, lg, xl, xxl | | Margin | none, xxs, xs, sm, md, lg, xl, xxl | | Padding | none, xxs, xs, sm, md, lg, xl, xxl | | Font | xxs, xs, sm, md, lg, xl, xxl | | Screen | xxs, xs, sm, md, lg, xl, xxl |

In some components you can address a specific screen size when passing props. Let's make gutter property responsive:

| Prop-Value | Screen Size | Gutter Value | --- | --- | --- | | gutterXxs="none" | xxs to xxl | none | gutterLg="xs" | lg to xxl | xs | gutterXxl="xl" | xxl | xl

And in action:

<Grid.Row gutterXxs="none" gutterLg="xs" gutterXxl="xl">
  ...
</Grid.Row>

Media Query

Available media query shortcuts:

| Screen | Description | | --- | --- | | xxs | xxs to xxl | | xs | xs to xxl | | sm | sm to xxl | | md | md to xxl | | lg | lg to xxl | | xl | xl to xxl | | xxl | xxl | | xsOnly | xs | | smOnly | sm | | mdOnly | md | | lgOnly | lg | | xlOnly | xl | | xxlOnly | xxl |

Customization

All the exported components are styled-components! So to override the styles, you treat them as any normal styled component. For example, you can extend them:

import React from 'react';
import { Button as BaseButton } from 'cathode';

export default BaseButton.extend`
  font-size: 16px;
  font-weight: bold;
`;

Components

Feedback Components

Feedback components are used to display messages, alerts or any content.

Message Component

Message

| Prop Name | Prop Type | Default | | --- | --- | --- | | mood | oneOf: 'info', 'success', 'error', 'warning' | 'info' | | moodyBg | bool | false | | sideBorders | bool | true | | sideBordersWidth | number | 5 | | icon | oneOfType: string, node, bool | true | | closable | bool | false | | autoCloseAfter | number | - | | onClose | func | - |

Message.Title

Use this component to wrap the message title.

Message.Description or shortly Message.Desc

Use this component to wrap the message body.

Example Usage

import React from 'react';
import { Icon, Message } from 'cathode';

const icon = (<Icon name="attention-filled" />);

export default () => (
  <Message icon={icon} mood="warning" moodyBg>
    <Message.Title>
      You need to login!
    </Message.Title>

    <Message.Description>
      In order to make use of these features you need to be logged-in.
    </Message.Description>
  </Message>
);