A Thumbsmith template is basically just a mustache-powered HTML/CSS file, with some optional metadata associated to it.
Example template file: example-template.thumbnail.html
---
name: example-template
description: Minimalistic template for demo purposes
default_props:
title: Page title goes
description: Page description comes here, lorem consectetur adipiscing elit. Maecenas nec imperdiet mi, et faucibus magna. Quisque faucibus condimentum nunc.
company: Company
logo: https://some-website.com/logo-dark.png
color: '#0000ff'
---
<!-- Template -->
<div class="container">
<p class="company">{{company}}</p>
<h1>{{title}}</h1>
<p>{{description}}</p>
<img class="logo" src="{{{logo}}}" />
</div>
<!-- Styling -->
<style>
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: flex-start;
font-family: sans-serif;
background-color: {{{color}}};
margin: 0;
}
.container {
width: 100%;
height: 100%;
padding: 4rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
</style>
There are two ways to create templates :
The metadata area demarcated by the --- characters (called front-matter) is only relevant is you're using the CLI. If you're using the website, you will have a nice UI to manage these fields.
Check out the mustache syntax cheatsheet for the template syntax.
Follow the steps on the "Create template" page in the dashboard.
Checkout the @thumbsmith/cli docs.
More docs coming soon