jQuery Plugins › jQuery Other Plugins › Material Style

Material Design UI Component Library Based On Bootstrap 4

Material Design UI Component Library Based On Bootstrap 4
File Size: 181 KB
Views Total: 375
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2021

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#Material Design

Material Style is a responsive, beautifully crafted, Material Design styled UI component library built using jQuery library, Bootstrap 4 framework, and Material Icons.

Components Included:

  • Alert
  • Button
  • Card
  • Checkbox
  • Drawer
  • Floating Action Button
  • Image List
  • List
  • Modal
  • Navbar
  • Popover
  • Progress Bar
  • Range Slider
  • Radio
  • Select Field
  • Shape
  • Snackbar
  • Spinner
  • Switch
  • Tab
  • Text Field
  • Toast

How to use it:

1. Install the package with NPM.

# NPM
$ npm i @materialstyle/materialstyle --save

2. Import the Material Style into your project.

import '@materialstyle/materialstyle';
// or
import '@materialstyle/materialstyle/js/dist/util';
import '@materialstyle/materialstyle/js/dist/alert';
@import '@materialstyle/materialstyle/dist/css/materialstyle.min.css';

3. Or load the necessary JavaScript and CSS files into the document. Here is a starter template shows how to create a basic Material Style page.

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Material Icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- Material Style CSS -->
  <link rel="stylesheet" href="./dist/css/materialstyle.min.css">
  <title>Material Style</title>
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-sm bg-blue navbar-dark fixed-top auto-hide">
    <a class="navbar-brand" href="javascript:">
      Brand
    </a>
  </nav>
  <!-- Root -->
  <section class="m-root">
    <!-- Container -->
    <div class="m-container">
      YOUR CONTENT
    </div>
  </section>
  <!-- Footer -->
  <footer class="bg-dark text-white">
    Footer
  </footer>
  <!-- jQuery -->
  <script src="/path/to/cdn/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="/path/to/cdn/popper.min.js"></script>
  <!-- Material Style JS -->
  <script src="./dist/js/materialstyle.min.js"></script>
</body>
</html>

More Previews:

Material Style Popover

Material Style Modal

Material Style Card

Material Style Drawer Nav

Material Style Buttons

Material Style Dropdown

Material Style Snackbar

Material Style Switch

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