The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Introduction

Let's get started with mdui using mdui's CDN and a simple page template.

Quick Start

The easiest way to use mdui is to import the CSS and JS files directly from the CDN.

If you want to use a package manager or download source files, please go to the download page.

CSS File

Add the following <link> tag to the <head> tag, before all other style files.

<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">

JS File

Add the following <script> tag to the end of the page, before the </body> tag.

<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>

mdui does not depend on any third-party libraries. Once the two files above are included, you can start using it.

Simple Page Template

Ensure your page follows the latest design and development standards, specifically by using the HTML5 doctype and including the viewport meta tag for responsive support. Your page should look like this:

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <meta name="renderer" content="webkit">

    <!-- mdui CSS -->
    <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- mdui JavaScript -->
    <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
  </body>
</html>

The above is everything required for a complete page. You can add more components and content on this basis to build your website.

Download