Skip to content

Commit 69b4e94

Browse files
asyncLizcopybara-github
asyncLiz
authored and
copybara-github
committed
docs: update readme and quick start
PiperOrigin-RevId: 623284221
1 parent 7a6cf16 commit 69b4e94

File tree

3 files changed

+128
-12
lines changed

3 files changed

+128
-12
lines changed

‎README.md

Lines changed: 73 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,83 @@
11
# Material Web
22

3-
Material
4-
[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)<!-- {.external} -->
5-
is a UI toolkit to build customizable and accessible web applications.
3+
<img src="./docs/images/material-web.gif"
4+
title="Material web components"
5+
alt="A collection of Material web components"
6+
style="border-radius: 32px">
67

7-
[Material 3](https://m3.material.io/)<!-- {.external} --> is the latest version of
8-
Google's open-source design system.
8+
[![Published on npm](https://img.shields.io/npm/v/%40material%2Fweb)](https://www.npmjs.com/package/@material/web)
9+
[![Join our Discord](https://img.shields.io/badge/discord-join%20chat-5865F2.svg?logo=discord&logoColor=fff&label=%23material)](https://lit.dev/discord/)
10+
[![Test status](https://github.com/material-components/material-web/actions/workflows/test.yml/badge.svg)](https://github.com/material-components/material-web/actions/workflows/test.yml)
11+
[![npm Downloads](https://img.shields.io/npm/dm/%40material%2Fweb?label=npm%20downloads)](https://npm-stat.com/charts.html?package=%40material%2Fweb)
12+
[![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/%40material%2Fweb)](https://www.jsdelivr.com/package/npm/@material/web?tab=stats)
913

10-
> Tip: Using Angular? We recommend using
11-
> [Angular Material](https://material.angular.io/)<!-- {.external} --> components
12-
> instead.
14+
`@material/web` is a library of
15+
[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)<!-- {.external} -->
16+
that helps build beautiful and accessible web applications. It uses
17+
[Material 3](https://m3.material.io/)<!-- {.external} -->, the latest version of Google's
18+
open-source design system.
1319

14-
**Resources**
20+
## Resources
1521

1622
- [Introduction](./docs/intro.md)
1723
- [Roadmap](./docs/roadmap.md)
18-
- [Quick start](./docs/quick-start.md)
19-
- [Bundle sizes](./docs/size.md)
2024
- [Component docs](./docs/components/)
25+
- [Bundle size](./docs/size.md)
2126
- [Browser support and FAQ](./docs/support.md)
27+
28+
## Quick start
29+
30+
> Tip: Using Angular? We recommend using
31+
> [Angular Material](https://material.angular.io/)<!-- {.external} --> components
32+
> instead.
33+
34+
This code snippet is a buildless example that loads `@material/web` from a CDN.
35+
Check out the [quick start](./docs/quick-start.md) guide to install and build
36+
for production.
37+
38+
<!-- LINT.IfChange -->
39+
40+
```html
41+
<head>
42+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
43+
<script type="importmap">
44+
{
45+
"imports": {
46+
"@material/web/": "https://esm.run/@material/web/"
47+
}
48+
}
49+
</script>
50+
<script type="module">
51+
import '@material/web/all.js';
52+
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
53+
54+
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
55+
</script>
56+
</head>
57+
<body>
58+
<h1 class="md-typescale-display-medium">Hello Material!</h1>
59+
<form>
60+
<p class="md-typescale-body-medium">Check out these controls in a form!</p>
61+
<md-checkbox></md-checkbox>
62+
<div>
63+
<md-radio name="group"></md-radio>
64+
<md-radio name="group"></md-radio>
65+
<md-radio name="group"></md-radio>
66+
</div>
67+
68+
<md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>
69+
70+
<md-outlined-button type="reset">Reset</md-outlined-button>
71+
</form>
72+
<style>
73+
form {
74+
display: flex;
75+
flex-direction: column;
76+
align-items: flex-start;
77+
gap: 16px;
78+
}
79+
</style>
80+
</body>
81+
```
82+
83+
<!-- LINT.ThenChange(./g3doc/docs/quick-start.md) -->

‎docs/images/material-web.gif

865 KB
Loading

‎docs/quick-start.md

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,68 @@ order: 2
88

99
<!--*
1010
# Document freshness: For more information, see go/fresh-source.
11-
freshness: { owner: 'lizmitchell' reviewed: '2024-04-01' }
11+
freshness: { owner: 'lizmitchell' reviewed: '2024-04-09' }
1212
tag: 'docType:gettingStarted'
1313
*-->
1414

1515
<!-- go/mwc-quick-start -->
1616

1717
<!-- [TOC] -->
1818

19+
## CDN
20+
21+
For fast prototyping, we recommend using [esm.run](https://esm.run/)<!-- {.external} -->,
22+
a CDN that allows you to use `@material/web` without installing and building
23+
from NPM.
24+
25+
<!-- LINT.IfChange -->
26+
27+
```html
28+
<head>
29+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
30+
<script type="importmap">
31+
{
32+
"imports": {
33+
"@material/web/": "https://esm.run/@material/web/"
34+
}
35+
}
36+
</script>
37+
<script type="module">
38+
import '@material/web/all.js';
39+
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
40+
41+
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
42+
</script>
43+
</head>
44+
<body>
45+
<h1 class="md-typescale-display-medium">Hello Material!</h1>
46+
<form>
47+
<p class="md-typescale-body-medium">Check out these controls in a form!</p>
48+
<md-checkbox></md-checkbox>
49+
<div>
50+
<md-radio name="group"></md-radio>
51+
<md-radio name="group"></md-radio>
52+
<md-radio name="group"></md-radio>
53+
</div>
54+
<md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>
55+
<md-outlined-button type="reset">Reset</md-outlined-button>
56+
</form>
57+
<style>
58+
form {
59+
display: flex;
60+
flex-direction: column;
61+
align-items: flex-start;
62+
gap: 16px;
63+
}
64+
</style>
65+
</body>
66+
```
67+
68+
<!-- LINT.ThenChange(../../README.md) -->
69+
70+
For production, follow the [install](#install) and [build](#building) steps
71+
below.
72+
1973
## Install
2074

2175
<!--#include file="../googlers/quick-start-install.md" -->

0 commit comments

Comments
 (0)