Materialize Installation Guide (CDN)
1
Create HTML File
1Step 1
Create a new file: index.html.
2Step 2
Paste the provided HTML structure into the file.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6 <title>Materialize + Tetrons Editor</title>
7 <!-- Materialize CSS CDN -->
8 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
9 <!-- Material Icons -->
10 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11 <style>
12 html, body {
13 margin: 0;
14 padding: 0;
15 height: 100vh;
16 width: 100vw;
17 overflow: hidden;
18 font-family: 'Inter', sans-serif;
19 }
20 .container {
21 display: flex;
22 flex-direction: column;
23 height: 100vh;
24 width: 100vw;
25 }
26 h4 {
27 text-align: center;
28 margin-top: 20px;
29 color: #333;
30 }
31 iframe {
32 flex: 1;
33 width: 100%;
34 border: none;
35 border-radius: 8px;
36 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
37 }
38 </style>
39</head>
40<body>
41 <div class="container">
42 <h4 class="center-align">Tetrons Editor</h4>
43 <div class="iframe-container">
44 <iframe
45 src="http://staging.tetrons.com/editor/dist/editor-host.html"
46 allowfullscreen>
47 </iframe>
48 </div>
49 </div>
50
51 <!-- Materialize JS CDN -->
52 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
53</body>
54</html>2
Open in Browser
1Step 1
Double-click index.html to open it in your browser.
2Step 2
You should see the Tetrons Editor styled with Materialize.
3
Optional Enhancements
1Step 1
Use Materialize components like buttons, cards, modals, etc., to enhance the UI.
2Step 2
Refer to: https://materializecss.com for more components and layout options.
Output Preview
