Norwegian Puffin Movies

    mdc-pug

    3.0.0-beta.5 • Public • Published

    MDC Pug

    Material Components Web implemented in Pug.

    Setup

    Install the library:

    npm i mdc-pug

    If you plan on using the Sass files, you'll also need to install sass:

    npm i -D sass

    NOTE: MDC Pug (as well as MDC Web) uses the new Sass Module System. Unfortunately at this time the node-sass implementation does not support it. Please use the sass library.

    Usage

    Pug

    You can include the whole library in your layout file:

    layout.pug

    include path-to-node_modules/mdc-pug/index
    
    doctype html
    html
      head
        link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500')
        link(rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons')
        link(rel='stylesheet' href='path-to-node-modules/mdc-pug/dist/mdc.css')
    
    body.mdc-typography
      block body
    
      script(src='path-to-node-modules/mdc-pug/dist/mdc.js')
      script.
        mdc.autoInit();

    All of the components will be available as mixins in other pug files that extend the layout:

    hello.pug

    extends layout
    
    block body
        +mdc-typography('Hello World')
        +mdc-button('Click Me')

    Alternatively you can include only the components you need:

    include path-to-node_modules/mdc-pug/mixins/button
    include path-to-node_modules/mdc-pug/mixins/typography
    
    doctype html
    html
        head
            link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500')
            link(rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons')
            link(rel='stylesheet' href='path-to-node-modules/mdc-pug/dist/mdc.css')
    
        body.mdc-typography
            +mdc-typography('Hello World')
            +mdc-button('Click Me')
    
        script(src='path-to-node-modules/mdc-pug/dist/mdc.js')
        script.
            mdc.autoInit();

    Sass

    You can use all the styles:

    @use 'path-to-node_modules/mdc-pug';

    or only the compon you need:

    @use 'path-to-node_modules/mdc-pug/lib/styles/button';
    @use 'path-to-node_modules/mdc-pug/lib/styles/typography';

    Install

    npm i mdc-pug

    DownloadsWeekly Downloads

    39

    Version

    3.0.0-beta.5

    License

    MIT

    Unpacked Size

    3.98 MB

    Total Files

    92

    Last publish

    Collaborators

    • olegpolyakov