Material Design Framework with jQuery and CSS | Material.js

The Material Design Framework is a library of jQuery-powered front-end development framework for building modern websites.

material design framework for web, material design components, material design css, material design examples, material design icon

UI Components Included:

  • Alerts
  • Appbars
  • Breadcrumbs
  • Button group
  • Buttons
  • Cards
  • Checkboxes
  • Chips
  • Containers
  • Dialogs
  • Drawer
  • Elevation
  • Floating motion button 
  • Grid Menu 
  • Radio buttons 
  • Ripple impact 
  • Select menus 
  • Sliders 
  • Snackbars 
  • Switch 
  • Tabs 
  • Textfields 

How to make use of it:

1. Load the required jQuery library and Material Icons within the doc.

<!-- Material Icons -->
<link rel="stylesheet" href="">
<!-- jQuery Library -->
<script src=""></script>

2. Download and load the Material.js framework within the doc.

<link href="/dist/css/material.min.css" rel="stylesheet" />
<script src="/dist/js/material.min.js"></script>

Material Design Framework In jQuery Plugin/Github

See Demo And Download

Official Website(Tronic247): Click Here

This superior jQuery/javascript plugin is developed by Tronic247. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…