# 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). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.trmnl.com/go/private-plugins/templates.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.