Have ideas to improve npm?Join in the discussion! »

    md-components

    17.0.0 • Public • Published

    md-components

    Greenkeeper badge

    js-standard-style Build Status npm Coverage Status Code Climate

    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

    New release

    np - A better npm publish

    $ np
    

    Install

    npm i md-components

    DownloadsWeekly Downloads

    5

    Version

    17.0.0

    License

    MIT

    Unpacked Size

    1.59 MB

    Total Files

    143

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar