Template Overview

So as we learned previously a template is technically a mini website that can be resized, manipulated and most importantly populated into. A template is setup as a repository of files, much like a website would be, with an index.html and auxiliary files and stylesheets to manipulate that HTML file.


Template Structure

Template files cannot simply function on their own, it is only one cog in the machine of Outfit (albeit the largest cog).

A finished template that an Author can add to thier project and edit, consists of 3 building blocks, Inputs, Files and a format.

1. Select Inputs
choose from existing inputs or create new ones to use in your template

background-image text-color color heading subheading body-copy facebook-link call-to-action logo artwork layout size

2. Code your Files
Design your template with HTML replacing hard coded values with {{inputs}}
<!DOCTYPE html>
<title>Outfit Template</title>
<style>h1 { color: {{color}} }</style>
<h1>{{heading}}</h1>
<img src={{logo}}"/>
3. Choose Format(s)
Think of formats like export settings. They are the dimensions and a file type your template exports to.

210 x 297, mm, pdf 100 x 200, px, jpg 100 x 200, px, png 100 x 100, %, html

Using this example, you would have created an editable document with the inputs color, heading and logo that can be exported to a png at 100px x 200px