> For the complete documentation index, see [llms.txt](https://docs.trmnl.com/go/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trmnl.com/go/private-plugins/templates.md). # Screen Templating ## Overview The TRMNL OG device is an **800x480 pixel, black and white, 2-bit grayscale display**. This means we had to abandon a lot of modern web styling techniques. Learn more about this process [here](https://trmnl.com/blog/design-system). For the latest documentation on building beautiful plugins with TRMNL, see our Framework docs:\ ### Quickstart (TRMNL account) The easiest way to start building with TRMNL is by [making a Private Plugin](https://trmnl.com/plugin_settings?keyname=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 ``. The example below has simple markup for a "full" layout plugin. We also offer half vertical, half horizontal, and quadrant sized layouts. **NOTE:** This code includes `view` classes that are specific to public plugin development, ***not*** to be used within TRMNL editor. ```erb

Motivational Quote

“I love inside jokes. I hope to be a part of one someday.”

Michael Scott

Plugin Title Instance Title

``` The above markup should produce a screen like this:

Sample screen render with TRMNL's plugin CSS stylesheet

Note: in some cases you may need to include the 'Inter' font (inside the ``) to achieve the same look and feel as TRMNL's in-browser markup editor described above: ``` ``` ### Customize and make it dynamic Use our [Framework Docs](https://trmnl.com/framework) to enhance your design and show/hide logic (example: [overflow management](https://trmnl.com/framework/overflow), [number formatting](https://trmnl.com/framework/format_value)). When you're satisfied with the design, replace dynamic content with `{{ variable }}` references. TRMNL uses the [Liquid templating library](https://shopify.github.io/liquid/) by Shopify to interpolate values into your template markup. You can then save {% hint style="info" %} [Tutorial - How to create a custom plugin](https://help.trmnl.com/en/articles/9510536-custom-plugins) {% endhint %} **Note**: You may also leverage [Liquid Filters](https://shopify.dev/docs/api/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](https://shopify.dev/docs/api/liquid/filters/money).