Material Design Framework - Material.js

A jQuery Vanilla JavaScript-powered Material Design front end development framwork (UI component library) for building modern websites.

Note that the Material.js v3 has removed jQuery dependency. However, you can still download the jQuery Version here.

UI Components Included:

• Alerts
• Appbars
• Banners
• Bottom appbars
• Breadcrumbs
• Button group
• Buttons
• Cards
• Checkboxes
• Chips
• Containers
• Dialogs
• Drawer
• Elevation
• Floating action button 
• Grid
• Lists
• Menu
• Progress
• Radio buttons 
• Ripple effect 
• Select menus 
• Sliders 
• Snackbars 
• Switch 
• Tables
• Tabs 
• Textfields
• Time picker
• Tooltips
• Typography
• Utilities

How to use it:

1. Load the required Material Icons and Roboto font in the document.

<!-- Roboto Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Required For v2 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Download and load the Material.js framework in the document. Happy coding!

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

Previews:

Changelog:

2022-01-13

• Added time picker

2022-01-03

• v3.0.1: CSS update

2021-12-30

• v3: removed jQuery dependency

2021-09-10

• Update _dark-mode.scss

2021-09-09

• Warning alert color

2021-09-08

• Add bottom appbar component

2021-08-26

• Update _buttons.scss

---

This awesome jQuery plugin is developed by Tronic247. For more Advanced Usages, please check the demo page or visit the official website.