Layout

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

The layout involves an amount of boilerplate for the flex based layout to work in all dimensions as you add more features to the app. It is important to declare the markup exactly as stated and without any additional elements.

<!DOCTYPE html>
<html>
	<head>
		<title>My App</title>
		<meta name="viewport" content="width=device-width"/>
		<meta name="ts-app-title" content="My App"/>
		<link rel="ts-app-icon" href="my-icon.svg"/>
	</head>
	<body>
		<div data-ts="App">
			<div data-ts="Main">
				<div data-ts="Content">
					<div data-ts="Panel">
						<em>Start building your app here!</em>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

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

The ts-app-title and ts-app-icon configures the titlebar as seen on top of this page, but you may alternatively configure the title and icon via the Header API. Note that the Panel will render the page scrollbar instead of the HTML element. Also note that if you're using Asides, it’s important to place them outside Main like this:

<div data-ts="App">
	<main data-ts="Main">…</main>
	<aside ts-aside>…</aside>
</div>

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

If you find a bug or need a feature…

Create GitHub Issue…