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

1. 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 ..
   

2. To start "compilation" while watching for changes run

   $ npm run dev
   

3. 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 ...

More Documents

• Google Material Design
• use Sass
• follow SUIT CSS guidelines
• Webpack, module bundler.

New release

np - A better npm publish

$ np