Starters
Three complete pages to copy: a plain page, an app with a sidebar, and a sign-in form.
How to use one
Copy the code into a file such as index.html and open
it in a browser. Each one loads Tsunami from the CDN at the
version of these docs, so it needs no build and no install. The
script goes in <head> as a plain
<script>, which is what lets it set the saved
theme before the first paint. To host the files yourself, see
the overview.
A page
A container, a page header and a card. Start here for a page without a sidebar.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.1.2/dist/tsunami.min.css">
<script src="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.1.2/dist/tsunami.min.js"></script>
</head>
<body>
<main class="container stack" style="padding-block: var(--space-4)">
<header class="page-header">
<div>
<h1>My page</h1>
<p>A short description of what this page is for.</p>
</div>
</header>
<article class="card">
<section class="stack">
<p>Start here. Every component is a class, and a data attribute picks its variant.</p>
<div class="stack" data-direction="row" data-gap="sm">
<button type="button" class="btn" data-variant="primary">Save</button>
<button type="button" class="btn">Cancel</button>
</div>
</section>
</article>
</main>
</body>
</html>An app with a sidebar
A sidebar that collapses on a wide
screen and slides in as a drawer on a phone, with a theme
switcher in the header. Add links to the list and mark the
current one with aria-current="page".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My app</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.1.2/dist/tsunami.min.css">
<script src="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.1.2/dist/tsunami.min.js"></script>
</head>
<body>
<div>
<aside class="sidebar" id="app-nav" popover>
<nav aria-label="Main">
<header>
<a href="/">
<span class="avatar" data-size="sm"><span>MA</span></span>
<span>My app</span>
</a>
</header>
<section>
<div role="group">
<ul>
<li>
<a href="/" aria-current="page">
<i class="icon icon-house" aria-hidden="true"></i><span>Overview</span>
</a>
</li>
<li>
<a href="/orders">
<i class="icon icon-receipt" aria-hidden="true"></i><span>Orders</span>
</a>
</li>
<li>
<a href="/customers">
<i class="icon icon-users" aria-hidden="true"></i><span>Customers</span>
</a>
</li>
</ul>
</div>
</section>
<footer>
<button type="button" class="btn" data-variant="ghost" data-size="icon"
commandfor="app-nav" command="--toggle-collapsed"
aria-label="Collapse or expand sidebar">
<i class="icon icon-panel-left" aria-hidden="true"></i>
</button>
</footer>
</nav>
</aside>
<main class="container stack" style="padding-block: var(--space-4)">
<header class="page-header">
<button type="button" class="btn sidebar-toggle" data-variant="ghost" data-size="icon"
popovertarget="app-nav" aria-label="Open menu">
<i class="icon icon-menu" aria-hidden="true"></i>
</button>
<h1>Overview</h1>
<div>
<div class="theme-switcher" role="group" aria-label="Theme">
<button type="button" data-theme-toggle="light" aria-label="Light"><i class="icon icon-sun" aria-hidden="true"></i></button>
<button type="button" data-theme-toggle="dark" aria-label="Dark"><i class="icon icon-moon" aria-hidden="true"></i></button>
<button type="button" data-theme-toggle="system" aria-label="System"><i class="icon icon-monitor" aria-hidden="true"></i></button>
</div>
</div>
</header>
<article class="card">
<section>
<p>Your content goes here.</p>
</section>
</article>
</main>
</div>
</body>
</html>A sign-in form
A centred card with a form that checks itself with Validation: leave a field empty and submit, and the error shows under it. Send the form to your own server where the example has none.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign in</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.1.2/dist/tsunami.min.css">
<script src="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.1.2/dist/tsunami.min.js"></script>
</head>
<body>
<main class="stack" style="min-height: 100vh; align-items: center; justify-content: center; padding: var(--space-4)">
<article class="card" style="width: 100%; max-width: 24rem">
<form data-validate>
<header>
<h1>Sign in</h1>
<p>Use your work email to continue.</p>
</header>
<section class="stack">
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="username" required
data-message="Enter an email like name@example.com">
</div>
<div class="field">
<label for="password">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required
data-message="Enter your password">
</div>
<button type="submit" class="btn" data-variant="primary">Continue</button>
</section>
</form>
</article>
</main>
</body>
</html>Bigger starting points
Four full pages are built only from Tsunami, and each has a Source button in its corner: the dashboard, an orders list, a settings form and a sign-in with a one-time code.