Creating a Template

Pre-template Creation

Before getting started we need to have a clear idea of what we’re building, what elements we want to turn into editable inputs and the wide array of formats that we could allow an author to produce.

So let’s say I’m wanting to create a suite of Google Web Ads, this is the process that could take place:

  1. I would first want to collate all my existing material, if I have it and then be able to find similarities with how content flows from one size to the next (see the image below).
  2. I would then extract my global styles that could always be the same across every size (ie. logo, colours, margins, ).
  3. After that I would look for differences across each format, what can be streamlined and what has to remain different (ie. changing the logo position for longer format sizes, floating a call to action when a format is longer).
  4. Finally I would collate the actual assets needed to style this template correctly (ie. logos, fonts, background images, colours).

This is an actual example of collating all the collateral needed and planning how the template will work at different sizes and what happens when there is certain content (in this case how content re-arranges when there is a background image)

Template Creation Options

Designing a template

Designing Outfit templates requires a decent knowledge of HTML and CSS. If you don’t know HTML or CSS check out some of these resources: W3Schools, Codecademy and Code School

At Outfit we like to use a local build tool to begin development. This build tool helps to streamline the process of creating various layouts quickly, we can mimic both the input behaviour with an in-built JSON file and use the browser as our own Format window that we can resize and manipulate.

Download the Build Tool

The home base of our template is our index.html.mst file. It is the structure on which everything sits. It looks exactly how a standard html file would look if we were to build a website, with a <head> and <body> section. Within the <head> we can link all of our dependencies and within our <body> we can actually build our template.

This is an example of a simple template’s index.html.mst contents, notice the use of curly brackets {{ }} everywhere (these are called Mustache tags, we use them to create dynamic inputs).

<!DOCTYPE html>
<html>
<head>
  <title>Resizable Template</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="main.css">
  <style>
    /* Any CSS with mustache needs to be
    applied within this index.html.mst file */

    .background-image {
      background-image: url('{{background-image}}')
    }
  </style>
</head>
<body class="{{font}}">
  <div class="page">
    <div class="background-image"></div>

    <div class="content">
      <h1 class="headline">{{{headline}}}</h1>
      <h2 class="subheading">{{{subheading}}}</h2>
      <a class="cta {{cta-style}}">
        {{{call-to-action}}}
      </a>
      <div class="logo"></div>
    </div><!--content-->
  </div><!--page-->

  <script src="jquery.min.js"></script>
  <script src="main.js"></script>

</body>
</html>

To style this HTML it’s a simple case of setting some CSS rules. Setting global styles is simple, however a style sheet can become complex when targeting a vast array of format sizes. To do this we use CSS @media queries. Within each media query we have the ability to target specific elements when the browser is resized. We like to use aspect ratios for our media queries because no matter the pixel dimensions we can still target certain sized documents correctly.

However in saying this there will always be the necessity to target specific pixel dimensions, so we never discourage them. They should be used in conjunction with aspect-ratio media queries.

Resize the template below for an example of how a browser can be resized to target certain media queries.

.background-color {
  background-color: grey;
}

@media (min-aspect-ratio: 2/1) {
  .background-color {
    background-color: #007CC4 /* blue */;
  }
}

@media (max-aspect-ratio: 2/3) {
  .background-color {
    background-color: #d13d3d /* red */;
  }
}

Once we are at a stage where a template is resizing nicely and some basic inputs are looking good we can import that local build into Outfit.

Creating a new template

  1. From the Templates Page (located within the main navigation) click + New Template.

  2. There are a range of options to choose from, but we’ll start from scratch so let’s create a New Blank template.
    Template Creation Options

  3. From here we can begin to setup our new template.

  • A. We can give the template a name. A template name could be related to the formats it uses or the campaign it’s designed for, or even a mixture of both (ie. Launch Campaign - Digital Sizes).
  • B. We can Add some formats to that template. If a format doesn’t exist, we can add that format from that screen as well.
  • C. We can also define which teams have access to this template. By default everyone has access to a template.
  • D. Lastly we have the ability to Publish a template straight away or set the template to Draft. By setting a template to Draft it is not accessible for authors (that means that can’t add documents into a Project, edit that document and export it). For larger accounts with many autonomous authors it’s advised to utilise this Draft functionality. Template Creation Options
  1. After creating a template we are taken to its repository. From here we can begin developing a new template or copy the code from a locally developed one.

  2. We have three tabs available to us in a Template Repository:
    inputs

  • Our Files tab houses all of our template files (and most importantly our index.html.mst file). We can add new files, delete existing files and even clone the template from this tab.
  • Our Inputs tab houses all of the Inputs that have been added to the template via the index.html.mst file. From that tab we can create new inputs and edit existing inputs.
  • Our Template Variations tab houses all of the formats that our template is constrained by. Via this tab we can lock certain inputs and add new formats to the template.
  1. A templates index.html.mst is our main file in which all other files flow through and build upon. It houses all of our HTML markup and Mustache logic (the building blocks for our inputs). To edit our index.html.mst click on the Edit button. When changes have been made to this file (or any file) remember to click the Save button, or easily use the Save keyboard shortcuts, CMD + S or CTRL + S.
    index

  2. Too see our changes, test our inputs or troubleshoot CSS bugs we can use our Template Variations screen. By selecting a few template variations and clicking Preset Inputs we give ourselves a nice little sandbox to test our template. preset inputs

  3. Once we’re happy with how the template is looking and interacting (ie. inputs are working as they should) we can go and set those documents to Published (if you haven’t already). This will then give authors the ability to add these template variations into their own personal Projects, edit them, share them and ultimately export them for business use. It is recommended to test the exports of a template just to make sure that everything is looking as it should.

Initial Template Alternatives

While creating a template from scratch provides a high level of flexibility in both design and code, it can be tricky at times, especially for designers new to the concept of designing with code. With this in mind we have provided designers with some easy kick-starter template alternatives to speed up the process of creation.

Base Templates

Every new account in Outfit comes pre-populated with a suite of Outfit Base templates. These templates are there to assist designers in creating templates and exist as examples on how things have been achieved. These templates can be cloned, edited up (and even deleted if you really don’t want them). Here is a full list of what new accounts in Outfit have access to:

Base - Resizable Our most basic, yet most flexible template. It services collateral from the digital space (ie. Web Ads, Digital Displays, Social Media) all the way to fully functioning print documents with crop marks (ie. Pull Up Banners, Posters, Flyers, DLs). This is the starter template from which almost every other Base template is built off.
Base - Postcard A double page print document, featuring crop marks and writing space on the back.
Base - Event Name Badges This is a bulk action, CSV enabled name badge template which allows authors to populate one Outfit document with over 100 unique name badges utilising Outfit's spreadsheet input type. It also features a generating QR code for each name badge.
Base - Wayfinding This suite of print wayfinding documents allows for up to 10 wayfinding points per poster using the collection input type.
Base - Pages This multi-page free-writing document provides authors with a writing space within Outfit. They can render these documents neatly to PDF.
Base - Infosite This highly customisable infosite provides authors with over 10 different section types that can be used for various scenarios.
Base - Diagram Generator Utilising the D3.js library Outfit can also create simple diagrams, great for corporate documentation. This generator has 5 different chart types.
Base - Business Cards Similar to the Event Name Badges template, the business card template is a bulk action spreadsheet enabled document that comes in both single sided and double sided options.
Base - Letterhead The letterhead template provides authors with 4 default layout options as well as simple brand customisation.
Base - Email Signature Generator This simple generator provides authors with a clean HTML signature that can be used on any email account.
Base - Image Editor A proof of concept template that allows authors to crop and edit photographs to then use within other Outfit documents. It features the ability to tune the images brightness, contrast, hue and saturation. Beyond this authors can also apply filters and use various image modes.

Upload a .zip

This utility helps to streamline the importing process of Outfit and is especially useful when locally developing a template.

Upload an SVG (Beta)

This Beta template creation option allows designers to create simple designs in Illustrator or Sketch, export that to SVG and then upload that SVG code into Outfit. Any text inputs will be automatically recognised and turned into inputs.

Importing an existing Webpage (Beta)

While the use-cases for this is quite niche this tool allows designers to scrape an existing web-page and import all the dependencies of that page into Outfit. From there designers can edit the code to their liking and add in functionality with the use of inputs. This import option is only useful for the creation of infosites and some email templates (if they’re hosted).

Flex Template Creator (Beta)

Our most exciting template creation alternative, but also our most Beta offering, is the Flex Template Creator. It allows designers to begin the process by creating a generic template layout using a WYSIWYG editor (much like Sketch and Photoshop). The basis of this creator uses the flex CSS properties. After creating the initial layout designers can then go in and edit the code and extend the functionality of the template for a variety of formats and inputs.