[SvelteKit UI Kit] Material Design integrate SvelteKit

Posted on Edited on In , , , , , Views: Word count in article: 3.9k Reading time ≈ 4 mins.

Material Design

Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.

SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Prerequisites

Usages

Initialize SvelteKit app

1
2
3
4
5
$ npm init svelte@next cloudolife-sveltekit-attractions-demo

$ cd cloudolife-sveltekit-attractions-demo

$ npm install

Install Material Components for the web

Material Components for the web can be installed locally using npm.

1
2
3
4
5
# It is available as a single all-in-one package:
$ npm install material-components-web

# Or as individual components:
# $ npm i @material/button @material/ripple

Load the precompiled all-in-one CSS and JS

To try Material Components for the web with minimal setup, load the precompiled all-in-one CSS and JS bundles from unpkg or your self host.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- src/app.html -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<link rel="icon" href="/favicon.png" />

		<!-- <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"> -->
		<link href="/material-components-web.min.css" rel="stylesheet">

		<!-- <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> -->

		<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> -->
		<link rel="stylesheet" href="/icon-family-Material-Icons.css" />
		
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%svelte.head%
	</head>
	<body>
		<div id="svelte">%svelte.body%</div>
	</body>
</html>

Use MDC markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- src/routes/index.svelte -->

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<button class="mdc-button foo-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Button</span>
</button>

<button bind:this={domButton} class="mdc-button mdc-button--raised">
  <span class="mdc-button__label">Contained Button</span>
</button>

<script lang="ts">
    import { onMount } from 'svelte';
    import { amp, browser, dev, mode, prerendering } from '$app/env';

    import {MDCRipple} from '@material/ripple';

    let domButton;

	onMount(async () => {
        if (browser) {
            const mdcButton = new MDCRipple(domButton);
            // Or attachTo
            // MDCRipple.attachTo(domButton);
        }
	});
</script>

Run

1
$ npm run dev -- --open

It will open brower and visit http://localhost:3000.

References

[1] Getting Started - Material Design - https://material.io/develop/web/getting-started

[2] SvelteKit • The fastest way to build Svelte apps - https://kit.svelte.dev/

[3] Getting started | Docs • SvelteKit - https://kit.svelte.dev/docs#introduction-getting-started

[4] Svelte • Cybernetically enhanced web apps - https://svelte.dev/

[5] Homepage - Material Design - https://material.io/

[6] material-components/material-components-web: Modular and customizable Material Design UI components for the web - https://github.com/material-components/material-components-web

[7] Material Components - https://github.com/material-components