Semantic UI Installation Guide (CDN)
1
Create HTML File
1Step 1
Create a new file: index.html.
2Step 2
Paste the provided Semantic UI HTML structure into it.
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>Semantic UI + Tetrons Editor</title>
7 <!-- Semantic UI CSS CDN -->
8 <link
9 rel="stylesheet"
10 href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
11 />
12 <style>
13 html, body {
14 margin: 0;
15 padding: 0;
16 height: 100vh;
17 width: 100vw;
18 overflow: hidden;
19 font-family: 'Inter', sans-serif;
20 }
21 .container {
22 display: flex;
23 flex-direction: column;
24 height: 100vh;
25 width: 100vw;
26 padding: 2rem;
27 }
28 h2.ui.header {
29 text-align: center;
30 color: #333;
31 margin-bottom: 1.5rem;
32 }
33 iframe {
34 flex: 1;
35 width: 100%;
36 border: none;
37 border-radius: 0.5rem;
38 box-shadow: 0 2px 6px rgba(0,0,0,0.1);
39 }
40 </style>
41</head>
42<body>
43 <div class="container">
44 <h2 class="ui header">Tetrons Editor</h2>
45 <iframe
46 src="http://staging.tetrons.com/editor/dist/editor-host.html"
47 allowfullscreen>
48 </iframe>
49 </div>
50
51 <!-- Semantic UI JS CDN -->
52 <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
53</body>
54</html>2
Open in Browser
1Step 1
Double-click index.html or open it in your preferred browser.
2Step 2
You should see the Semantic UI-styled Tetrons Editor embedded via iframe.
3
Optional Enhancements
1Step 1
Use Semantic UI components like buttons, grids, or cards to add more functionality or layout.
2Step 2
See: https://semantic-ui.com/ for documentation and components.
Output Preview
