md-components

Installation

$ npm install --save md-components

Usage

/js/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {Shell} from 'md-components'

class App extends React.Component {

  render() {
    return (
      <Shell title='my app'>
        <div>hello world</div>
      </Shell>
    )
  }

}

ReactDOM.render(<App />, document.getElementById('root'))

/css/index.scss

@import "../node_modules/md-components/css/base";

Fonts

The 'Roboto' font must be provided separetely and is not part of the package, e.g.:

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');

Custom colors / Theming

md-components uses six colors:

primary
primary dark
primary light
accent
acent dark
accent light

The font color can be either "White" or "Black" and must be specified for each color respectively. Your main sass file might look like this:

@import "node_modules/md-components/css/base";

/* provide your custom colors */
$color-primary: #1B325F;
$color-primary-text: White;

$color-primary--dark: #303F9F;
$color-primary-text--dark: White;

$color-primary--light: #E8EAF6;
$color-primary-text--light: Black;

$color-accent: #FF4081;
$color-accent-text: White;

$color-accent--dark: #F50057;
$color-accent-text--dark: White;

$color-accent--light: #FF80AB;
$color-accent-text--light: Black;

@import "node_modules/md-components/components/header/Header";
@import "node_modules/md-components/components/navigation/Navigation";

The Google material color package provides convenient access to the "official" google color palette:

@import "palette";
@import "node_modules/md-components/css/base";

/* provide your custom colors */
$color-primary: palette(Indigo, 500);
$color-primary-text: White;

$color-primary--dark: palette(Indigo, 700);
$color-primary-text--dark: White;

$color-primary--light: palette(Indigo, 50);
$color-primary-text--light: Black;

$color-accent: palette(Pink, A200);
$color-accent-text: White;

$color-accent--dark: palette(Pink, A400);
$color-accent-text--dark: White;

$color-accent--light: palette(Pink, A100);
$color-accent-text--light: Black;

@import "node_modules/md-components/components/header/Header";
@import "node_modules/md-components/components/navigation/Navigation";

Development

You have to link md-components into the ./examples folder. You cannot use a relative path from ./examples to the ./src since create-react-app will throw an error.
```
$ cd examples && npm link ../ && cd ..
```
To start "compilation" while watching for changes run
```
$ npm run dev
```
Run the examples project which uses all components
```
$ npm run examples
```

IE11

If you want to support IE11, you need to supply an Array.prototype.findIndex polyfill with babel-polyfill or core-js. E.g with core-js:

npm i core-js --save

// your entry point e.g. index.js
import 'core-js/fn/array/find-index'
import ...

HBM / md-components

readme