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/[email protected]/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/[email protected]/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/[email protected]/dist/css/mdui.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- mdui JavaScript -->
    <script src="https://unpkg.com/[email protected]/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