Screen Templating
TRMNL's native design system for developing beautiful, e-ink friendly screens.
Overview
The TRMNL device is an 800x480 pixel, black and white, 1-bit grayscale display. This means we had to abandon a lot of modern web styling techniques when developing the API. Learn more about this process here.
For the latest documentation on building beautiful plugins with TRMNL, see our Framework docs:
https://usetrmnl.com/framework
Quickstart (TRMNL account)
The easiest way to start building with TRMNL is by making a Private Plugin from inside your account. This includes an inline editor, merge variable interpolation, and a live previewer.
Quickstart (no TRMNL account)
Create an HTML file with our plugins CSS + JS embedded in the <head>.
The example below has simple markup for a "full" layout plugin. We also offer half vertical, half horizontal, and quadrant sized layouts.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css">
<script src="https://usetrmnl.com/js/latest/plugins.js"></script>
</head>
<body class="environment trmnl">
<div class="screen">
<div class="view view--full">
<div class="layout">
<div class="columns">
<div class="column">
<div class="markdown">
<span class="title">Motivational Quote</span>
<div class="content content--center">“I love inside jokes. I hope to be a part of one someday.”</div>
<span class="label label--underline">Michael Scott</span>
</div>
</div>
</div>
</div>
<div class="title_bar">
<img class="image" src="https://usetrmnl.com/images/plugins/trmnl--render.svg" />
<span class="title">Plugin Title</span>
<span class="instance">Instance Title</span>
</div>
</div>
</div>
</body>
</html>The above markup should produce a screen like this:
Note: in some cases you may need to include the 'Inter' font (inside the <head>) to achieve the same look and feel as TRMNL's in-browser markup editor described above:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;350;375;400;450;600;700&display=swap" rel="stylesheet">Customize and make it dynamic
Use our Framework Docs to enhance your design and show/hide logic (example: overflow management, number formatting).
When you're satisfied with the design, replace dynamic content with {{ variable }} references. TRMNL uses the Liquid templating library by Shopify to interpolate values into your template markup. You can then save
Note: You may also leverage Liquid Filters to reduce the sanitization required by the service producing data for your TRMNL plugins. For example, you can convert "10" to "$10.00" via money_with_currency.
Last updated