Starter Templates

Sometimes you just need that basic structure to get you going! Here are a couple of quick-start templates.

basic

Markup

<!doctype html>
<html lang="en">
  <head>
    <title>We're using Platform UI!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
&lt;<span style="color:#ff79c6">link</span> <span style="color:#50fa7b">rel</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;preconnect&#34;</span> <span style="color:#50fa7b">href</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;https://unpkg.com&#34;</span> <span style="color:#50fa7b">crossorigin</span>&gt;
&lt;<span style="color:#ff79c6">link</span> <span style="color:#50fa7b">rel</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;stylesheet&#34;</span> <span style="color:#50fa7b">href</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;https://unpkg.com/@ritterim/platform-ui/dist/platform-ui.min.css&#34;</span> <span style="color:#50fa7b">crossorigin</span>&gt;

</head> <body> <h1>So cool!</h1> <!– Website things… –> <script src="https://unpkg.com/@ritterim/platform-ui/dist/js/platform-ui.min.js" crossorigin defer></script> </body> </html>

Looking for a little more to get going? Check out our Launchpad!

Holy grail

Markup

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

<head> <title>Holy Grail layout | Platform UI!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!– load fonts –> <link rel="stylesheet" href="https://unpkg.com/@ritterim/platform-ui/dist/platform-ui.min.css"> </head>

<body class="flex flex–column"> <header class="py-6 px-3"> <h1>Header</h1> </header> <main class="block-container flex–grow"> <aside class="block lg-tablet-up-2"> <h1>Side Menu</h1> </aside> <section class="block lg-tablet-up-8 p-3"> <h1 class="text–base">Main Content</h1> </section> <aside class="block lg-tablet-up-2"> <h1>Aside</h1> </aside> </main> <footer class="py-6 px-3"> <h1>Footer</h1> </footer> </body> <script src="https://unpkg.com/@ritterim/platform-ui/dist/js/platform-ui.min.js"></script>

</html>