-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
81 lines (70 loc) · 3.93 KB
/
index.html
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#003ecc">
<link href="/SimpleWebDesign/resources/style.css" rel="stylesheet">
<script src="/SimpleWebDesign/resources/script.js"></script>
<link href="/SimpleWebDesign/resources/favicon.png" rel="icon">
<title>Simple Web Design</title>
</head>
<body>
<swd-menu>
<a class="only-smaller-md" tabindex="0" onclick="swd.query('swd-navigation').toggle()"><swd-icon class="hamburger-icon"></swd-icon></a>
<a class="swd-menu-title" href="/SimpleWebDesign">Simple Web Design</a>
<div class="contents only-bigger-md">
<a href="/SimpleWebDesign/components">Components</a>
<a href="/SimpleWebDesign/colors">Colors</a>
<a href="/SimpleWebDesign/functions">Functions</a>
</div>
</swd-menu>
<swd-navigation navigation-collapse>
<a href="/SimpleWebDesign" selected>Home</a>
<a href="/SimpleWebDesign/components">Components</a>
<a href="/SimpleWebDesign/colors">Colors</a>
<a href="/SimpleWebDesign/functions">Functions</a>
</swd-navigation>
<div class="container-xl">
<h2>Simple Web Design</h2>
<p>A simple way to style your responsive website! This is a framework like Bootstrap but more lightweight.</p>
<div class="flex">
<a class="button" href="/SimpleWebDesign/components">Get started</a>
<a class="button" href="/SimpleWebDesign/downloads">Download</a>
</div>
</div>
<div class="container-xl grid-cols-md-2 grd-cols-1">
<a class="text-no-decoration" href="/SimpleWebDesign/components">
<swd-card class="swd-card-hover margin-bottom-0">
<h4 class="blue-text">Web-Components</h4>
<p>Components with logical functionality are implementend using the web-components standard. It is faster than old implementation approaches and are compatible with single-page-applicaton frameworks like vue and angular.</p>
</swd-card>
</a>
<a class="text-no-decoration" href="/SimpleWebDesign/colors">
<swd-card class="swd-card-hover margin-bottom-0">
<h4 class="green-text">Dynamic Color System</h4>
<p>Theme colors can be easily set with variables. The framework supports automatic light-mode and dark-mode detection but can also be used with one mode only.</p>
</swd-card>
</a>
<a class="text-no-decoration" href="/SimpleWebDesign/functions#localization">
<swd-card class="swd-card-hover margin-bottom-0">
<h4 class="yellow-text">I18n Localization</h4>
<p>Attributes and inner-html text can be localized. The translations can be stored in properties files.
</p>
</swd-card>
</a>
<a class="text-no-decoration" href="/SimpleWebDesign/functions#databinding">
<swd-card class="swd-card-hover margin-bottom-0">
<h4 class="red-text">Lightweight Databinding</h4>
<p>There is a simple way to read and write data to attributes and inner-html to create small tools very fast. Is is not recommended to use this as a replacement to single-page-applicaton frameworks because the feature set is very minimal.</p>
</swd-card>
</a>
</div>
<swd-footer>
<a class="text-nowrap">© 2024 Der Zauberer</a>
<div class="width-100"></div>
<a href="/SimpleWebDesign/imprint">Imprint</a>
<a href="/SimpleWebDesign/privacy-policy">Privacy policy</a>
</swd-footer>
</body>
</html>