Material Design Framework - Material.js

File Size: 326 KB
Views Total: 1252
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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 
  • Slider
  • 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:[email protected];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:

Material Design Framework Alerts

Material Design Framework Dialog

Material Design Framework Card

Material Design Framework Buttons

Material Design Framework Appbar

Material Design Framework Select

Material Design Framework Tabs

Material Design Framework Switch

Material Design Framework Snackbar

Material Design Framework Slider Control

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.