Layout

This is the minimum viable HTML boilerplate for UI components to work out.

You may want to tweak the viewport meta tag, but this is a good starting point.

<!DOCTYPE html>
<html>
	<head>
		<title>Layout</title>
		<meta name="viewport" content="width=device-width"/>
	</head>
	<body>
		<header data-ts="TopBar"></header>
		<main data-ts="Main">
			<div data-ts="MainContent">
				<h1>Main content</h1>
			</div>
		</main>
	</body>
</html>

TopBar

The page should have a TopBar even if you don't plan to use it. That’s because the topbar is always visible in mobile layout, where it functions to toggle the main navigation menu.

Main

The Main draws the scrollbar now that body overflow is hidden. This setup will let us use absolute position to emulate fixed position, which doesn't work right inside iframes on mobile devices.

MainContent

The MainContent element should contain more or less everything your app has to show.

Asides

If you're using Asides, it’s important to place them outside Main like this:

<main data-ts="Main">
	<h1>Main content</h1>
</main>
<aside ts-aside>
	<div ts-panel>
		<p>Aside content</p>
	</div>
</aside>

With this in mind, you are ready to start using components.