webui 0.11.2

`early development` Website UI framework and component library for quickly building websites with native support for Material UI standardization.
Documentation 
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Web UI Starter File</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <base href="/" />
    <script type="text/javascript">
        navigator?.serviceWorker?.register('service-worker.min.js');
    </script>
    <link href="Logo.svg" rel="icon" type="image/svg+xml" sizes="any" />
    <link rel="manifest" href="app.webmanifest">

    <link href="https://cdn.myfi.ws/css/webui.min.css" rel="stylesheet" />
    <script src="https://cdn.myfi.ws/webui/loader.min.js"></script>

    <link data-trunk href="root_files" rel="copy-dir" />
    <link data-trunk href="d" rel="copy-dir" data-target-path="d" />
    <link data-trunk href="wc" rel="copy-dir" data-target-path="wc" />
    <link data-trunk href="pkg" rel="copy-dir" data-target-path="/" />

    <!--Web Worker-->
    <script data-trunk type="module" src="src-js/main.js"></script>
    <link data-trunk href="src-js/worker.js" rel="copy-file" data-target-path="/" />
    <!--End Web Worker-->

    <meta name="theme-color" content="#FF2E46" />
    <!--Other useful meta tags
        <meta name="author" content="">
        <meta name="description" content="">

        <meta property="og:image" content="">
        <meta property="og:title" content="">
        <meta property="og:url" content="">
        <meta property="og:description" content="">

        <meta name="twitter:title" content="">
        <meta name="twitter:url" content="">
        <meta name="twitter:site" content="">
        <meta name="twitter:description" content="">
        <meta name="twitter:image" content="">
        -->
</head>

<body>
    <webui-app-config src="appConfig.json"></webui-app-config>
    <webui-data data-app-name="App Name" data-company-possessive="Company's" data-company-singular="Stoic Dreams">
        <template slot="html" name="app-not-found">
            <webui-flex grow></webui-flex>
            <p>This is custom 404 content set by a webui-data component in the index.html file.</p>
            <p class="text-center"><webui-link theme="info" href="/">Return Home</webui-link></p>
            <webui-flex grow></webui-flex>
        </template>
        <template slot="html" name="app-under-construction">
            <p>This is custom Under Construction content set by a webui-data component in the index.html file.</p>
            <p class="text-center"><webui-link theme="success" href="/">Return Home</webui-link></p>
        </template>
    </webui-data>
    <webui-app data-removeclass=".nav|open;.shared|open">
        <webui-drawer slot="left" class="nav elevation-20" docked="true" data-state="slot|docked" data-moveable data-dockable>
            <webui-flex justify="center" slot="header">
                Your Logo Here!
            </webui-flex>
            <webui-nav routes="/nav.json" data-subscribe="app-nav-routes:setNavRoutes"></webui-nav>
        </webui-drawer>
        <webui-drawer slot="right" class="shared elevation-20" data-stopclick data-moveable data-state="slot">
        </webui-drawer>
        <header slot="header">
            <button aria-label="open navigation menu" data-toggleclass=".nav|open" class="elevation-10 pa-1 mx-1">
                <webui-icon icon="hamburger"></webui-icon>
            </button>
            <h1 data-subscribe="page-title:innerHTML"></h1>
            <h2 data-subscribe="page-subtitle:innerHTML"></h2>
            <webui-flex grow></webui-flex>
            <webui-feedback title="Provide us your feedback" data-post="https://api.myfi.ws/feedback/new" data-json-name="message">Your custom message here! </webui-feedback>
            <webui-alerts title="View your notifications" data-title="My Alerts" data-toggleclass=".shared|open"></webui-alerts>
            <webui-myfi-info></webui-myfi-info>
        </header>
        <noscript>Javascript is required to view this site</noscript>
        <webui-page-footer copyright="2024" company="Your Company">
            <webui-next-page theme="tertiary" data-subscribe="page-next-page"></webui-next-page>
            <webui-flex class="my-3" justify="center" wrap>
                <webui-link href="/about" icon="exclamation|shape:circle|backing|bordered">About {APP_NAME}</webui-link>
                <webui-link href="/contact" icon="messages|fill|shade:tri">Contact {COMPANY_SINGULAR}</webui-link>
                <webui-link href="/privacy" icon="exclamation|shape:shield|backing|bordered">Privacy</webui-link>
                <webui-link href="/terms" icon="handshake|fill|shade|tri">Terms & Conditions</webui-link>
            </webui-flex>
            <webui-stoic-social-links class="mb-2"></webui-stoic-social-links>
        </webui-page-footer>
    </webui-app>
</body>

</html>