https://github.com/ilxanlar/cathode

A UI Toolkit for React Developers!
https://github.com/ilxanlar/cathode

form forms react react-components reactjs ui-components ui-kit uikit

Last synced: 3 months ago
JSON representation

A UI Toolkit for React Developers!

• Host: GitHub
• URL: https://github.com/ilxanlar/cathode
• Owner: ilxanlar
• Created: 2016-11-14T22:35:18.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-09-24T08:23:57.000Z (over 6 years ago)
• Last Synced: 2024-10-10T22:17:39.760Z (3 months ago)
• Topics: form, forms, react, react-components, reactjs, ui-components, ui-kit, uikit
• Language: JavaScript
• Size: 1.49 MB
• Stars: 12
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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(

  

    

    

  ,

  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:

```

  ...

```

## 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 = ();

export default () => (

  

    

      You need to login!

    

    

      In order to make use of these features you need to be logged-in.

    

  

);

```