https://github.com/indoqa/indoqa-rebass-theme

A rebass theme based on material design.
https://github.com/indoqa/indoqa-rebass-theme

Last synced: 4 days ago
JSON representation

A rebass theme based on material design.

• Host: GitHub
• URL: https://github.com/indoqa/indoqa-rebass-theme
• Owner: Indoqa
• License: apache-2.0
• Created: 2016-10-09T19:28:47.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-10-13T08:37:26.000Z (about 8 years ago)
• Last Synced: 2024-08-10T21:46:06.813Z (3 months ago)
• Language: CSS
• Homepage: https://indoqa.github.io/indoqa-rebass-theme/
• Size: 1.57 MB
• Stars: 0
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Indoqa Rebass Theme

A rebass theme based on material design. See a list of already styled components in our [demo app](https://indoqa.github.io/indoqa-rebass-theme/)

## Design

The theme is designed to add a basic material look and feel. It intents to be extended by a custom application theme. So the cascading order can be

```

"Rebass base styles" < "Material Theme" < "Custom Applicaton Theme" < "Per component styling"

```

## Usage

### Higher order component

For convenience we provide a higher order component that

  * sets app the rebass child context

  * merges a custom application theme into the material theme

  * adds a root `
` that sets font-family to 'Roboto'

  * adds a css file that includes the Roboto font files downloaded from Google Fonts


```javascript

import React from 'react'

import MaterialProvider from 'indoqa-rebass-theme'

import DemoPage from './DemoPage.react'

const customTheme = {

  Heading: {

    marginBottom: '10px',

    marginTop: '30px'

  }

}

const DemoApp = () => (

  

    

  

)

export default DemoApp

```  

### Low level 

If you only want to reuse the rebass configuration file merged with custom application styles, you can create the config object with 

```javascript

import createMaterialTheme from 'indoqa-rebass-theme'

import customTheme from './my-custom-theme.js'

const rebassConfig = createMaterialTheme(customTheme)

....

getChildContext() {

 return {

  rebass: rebassConfig

 }

}

```