Code Monkey home page Code Monkey logo

material-components-web-v7's Introduction

โค๏ธ ๐Ÿฅณ Material.io web components setup

โœ‹ PLEASE GO THROUGH THE README COMPLETELY

This Repo is the setup for the Latest version of Material.io web components

Instructions

  • Clone or download the repo

  • run

    npm install
    
  • to run the dev server

    npm run start
    

    dev server runs on the http://localhost:9000

  • to create build

    npm run build
    
Note:- you can install all the Materail.io web components all at once or as individual components.

Run this command to install all components at once

npm i material-components-web

or as individual component

npm i @material/button @material/ripple

List of dev dependencies used

package version
@babel/core ^7.11.6
@babel/preset-env ^7.11.5
babel-loader ^8.1.0
css-loader ^4.3.0
fibers ^5.0.0
file-loader ^6.1.0
html-loader ^1.3.0
html-webpack-plugin ^4.4.1
mini-css-extract-plugin ^0.11.2
sass ^1.26.10
sass-loader ^10.0.2
webpack ^4.44.1
webpack-cli ^3.3.12
webpack-dev-server ^3.11.0

List of dependencies used

package version
@material/button ^7.0.0
@material/ripple ^7.0.0

you can add new pages(multiple html files) by importing them into the src/js/index.js

๐Ÿ’ก don't forget to add the entry in the webpack.config.js under plugins setion

  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    new HtmlWebpackPlugin({
      filename: "page.html",
      template: "src/page.html",
    }),
    ... create new pages and add entry here and import them into the src/js/index.js
  ],

โš ๏ธ don't forget to add the filename otherwise it is taken as the default entry creating a index.html(also overrides the actual index.html) instead of the actual filename(page.html)

๐Ÿคž use a css reset like Normalize.css as a cdn link if required CDN LINK

๐Ÿ‘‰ Please Support and Subscribe to My Youtube Channel

Made with โค๏ธ - by FrontEndFunn

material-components-web-v7's People

Contributors

frontendfunn avatar

Stargazers

Jaykrushna Solanki avatar O.I avatar Malgany avatar Fredy Sandoval avatar Pato Montecchiarini avatar Gajanan Pawaskar avatar

Watchers

James Cloos avatar jmalad avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.