malachite/README.md

Malachite, a styled-components theme / lib for react

# Malachite
A lightweight [Styled Components](https://www.styled-components.com/) library composed of configurable, pre-styled components that can be used to kickstart your UI development process.

## Guide
Malachite breaks down its components into four categories: `Elements`, `Components` and `Helpers`.

### Basic Usage
```js
// Your application root
import React from "react";
import Malachite from "malachite";

class App extends Component {
    // ...
}

export default () => <Malachite app={() => <App />} />;

// Or

export default () => (
    <Malachite>
        <App />
    </Malachite>
)
```

### Customising the theme
You can pass an object literal to the theme prop of the Malachite component. It will override existing values and add any new values to the theme object which is available in your app's styled-components.

```js
const theme = {
    colors: {
        primary: "pink"
    }
}

export default () => (
    <Malachite theme={theme}>
        <App />
    </Malachite>
)
```

### Elements
`Elements` are native html elements that have the theme configuration applied to them.

### Components
`Components` are common UI patters, typically composed using `Elements`.

### Helpers
`Helpers` are functions that are used within this library, you should use them on your custom components too.

#### Screens helper
The screens helper sort of works like a sass mixin, it provides a cleaner syntax for screen media queries.

Usage:
```js
const MyComponent = styled.div`
    ${screens.md`
        background-color: pink;
    `};
`;
```