Starter Template Breakdown

Check out this notated starter template to understand the main components of a template and a simple set of utilities to get the most out of your template.

Document Tree

Within a template there will be 3 editable files, approximately 3 non-editable utility files and an unlimited amount of other auxiliry files/scripts. Templates are repositories so users can add as many files as they need.

- index.html.mst ✅

- main.css ✅
    | @import('font file')

- main.js ✅

- prefixfree.js 🛑

- minireset.css 🛑

index.html.mst

Within the index.html.mst you can enter Mustache tags for your inputs. There are a few things to note when working with the index.html.mst.

<!DOCTYPE html>
<html>
  <head>
    <title>Print Generic</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="minireset.css">

    <style>
      .placeholder {
        position: absolute;
        top: 3mm;
        left: 3mm;
        right: 3mm;
        bottom: 3mm;
        background-image: url('');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 100;
        pointer-events: none;
        opacity: 0.7;
      }

      .headline-overflow {
        max-height: 40pt;
      }

      /* ANY OTHER STYLES THAT NEED MUSTACHE.JS CAPABILITIES */
    </style>
  </head>
  <body style="background: white">
    
    <div class="page">

      <div class="bleed center-children">

        <div class="placeholder"></div>

        <!-- ADD YOUR CUSTOM HTML CODE HERE -->

        <!--<div class="container fit">

          <div class="front-page content {{Theme}}">

            <img src="{{{ logo }}}" class="content__logo" />
            
            {{#heading}}
              <div class="text-overflow headline-overflow">
                <div class="inner">
                  <h1 class="back-headline">{{{heading}}}</h1>
                </div>
              </div>
            {{/heading}}

          </div>

        </div>-->

      </div><!--bleed-->

    </div><!--page-->

  <script>
    window.showCrop = {{show-crop}}{{^show-crop}}true{{/show-crop}};

    if (window.showCrop) {
        document.querySelector('body').classList.add('show-crop');
    } else {
        document.querySelector('body').classList.add('hide-crop');
    }
  </script>

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

  <script src="prefixfree.js"></script>

    <script>
      function checkHeight() {
        $('.text-overflow')
          .each(function() {
          	const e = $(this);
            const height = e.find('.inner').height();
            const parentHeight = e.height() + 2;
			e.toggleClass('overflow', height > parentHeight);
          });        
      }
      
      function loop() {
        checkHeight();
      } setInterval(loop, 1000);
    </script>

  </body>
</html>

Placeholder design

When creating a template from a pre-existing design users should utilise the .placeholder div to overlay the design. This will allow for quicker developing and a more accurate result. The code is all ready to go you will just need to match the dimensions correctly.

Markup Structure & Crop Marks

As most Outfit templates are for print the index.html.mst file has been specifically setup to allow for responsive crop marks on any templates. This means that all print templates need to use the .page and .bleed divs. This will wrap all content in a page wrapper that will apply a bleed setting and then add the crop mark svg. Check out the main.js file below for more info on that.

Depending on if crop marks have been turned on or off in the template a helper class will be added (show-crop or hide-crop) that users can hook into.

When developing a template, place all custom code inside the .bleed div.

Overset Text

One of the most useful utility scripts that we use in Outfit is the Overset text warning. This allows designers to limit the amount of text an author can populate into a template. To activate this simple script wrap your input as below and define a height or max-height on the outer element.

<div class="text-overflow headline-overflow">
    <div class="inner">
        <h1 class="headline">{{{heading}}}</h1>
    </div>
</div>

.headline-overflow {
    max-height: 40pt;
}

main.js

Within the main.js file users can add any custom JS scripts. However there will be 1 or 2 scripts that will need to be included in the template.

// PLACE CUSTOM JS SCRIPTS HERE

//--------------------------- crop and bleed -----------------------------------

var cropImage = 'https://outfit-v2-exports-production.s3-accelerate.amazonaws.com/media_library_items/bdb964a7c7fdc5ebc8bbde9204b62464/crop.svg'

Array.prototype.slice.call(document.querySelectorAll('.page'))
.forEach(function(page) {
    var parser = new DOMParser();
    page.style.cssText = 'overflow: hidden; position: relative; height: 100vh; width: 100vw';

    var cropString = (
    '<div class="crop-marks">' +
    '<img style="height: 28.81px; width: 28.81px; position: absolute; top: 0; left: 0;" src="'+cropImage+'">' +
    '<img style="height: 28.81px; width: 28.81px; transform: rotate(90deg); position: absolute; top: 0; right: 0;" src="'+cropImage+'">' +
    '<img style="height: 28.81px; width: 28.81px; transform: rotate(180deg); position: absolute; bottom: 0; right: 0;" src="'+cropImage+'">' +
    '<img style="height: 28.81px; width: 28.81px; transform: rotate(270deg); position: absolute; bottom: 0; left: 0;" src="'+cropImage+'">' +
    '</div>'
    )

    var cropNode = parser.parseFromString(cropString, "text/html").body.firstChild;

    !!window.showCrop && page.insertBefore(cropNode, null);
}
);

Array.prototype.slice.call(document.querySelectorAll('.bleed'))
.forEach(function(bleed) {
    bleed.style.cssText = !!window.showCrop 
    ? 'position: absolute; top: 4.41mm; right: 4.41mm; bottom: 4.41mm; left: 4.41mm;'
    : 'position: absolute; top: -3mm; right: -3mm; bottom: -3mm; left: -3mm';
});   

// setSize

window.addEventListener("resize", setSize);

function setSize() {
    var vw = (showCrop ? window.innerWidth : window.innerWidth + 57.62) / 100
    var vh = (showCrop ? window.innerHeight : window.innerHeight + 57.62) / 100
    var vmin = Math.min(vw, vh)
    var vmax = Math.max(vw, vh)
    document.documentElement.style.fontSize = ((vmin * 2) + (vmax * 1.4) + (vh * 2)) + "px";
}

setSize();

Crop & Bleed

Simply include this script and the template will take care of the rest

SetSize

This script is very useful for responsive templates that allows the elements in the template to scale with the size of the viewport. setSize defines a font-size on the HTML and will scale elements sized in em. This does not have to be used for templates that do not need to be responsive.

main.css

The main.css only has 2 required elements.

Font Smoothing

To allow for the best results please keep the first CSS style to antialias the font.

Overset Text Styles

In conjunction with the overset text script include all .overflow styles. This will hook into the overflow class that is added to the element if to much content is added.

@import 'https://fonts.googleapis.com/css?family=Roboto:400,700';

* {
  -webkit-font-smoothing: antialiased;
}

@media screen {
  .crop .page:not(:last-child) {
    border-bottom: 1px dotted cyan;
  }
}

.fit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.relative {
  position: relative;
}

.cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.contain {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.blend {
  background-blend-mode: overlay;
}

/** Overflow Styles **/
.overflow {
  position: relative !important;
  border: 1px dashed red;
  color: red !important;
}

.overflow * { 
  color: inherit !important; 
}

/* OVERSET CONTENT STYLES */

.overflow::before {
  content: '+';
  position: absolute;
  z-index: 99999999;
  top: 5px;
  right: 5px;
  height: 1.5em;
  width: 1.5em;
  min-width: 15px;
  min-height: 15px;
  border: 1px solid red;
  font-size: 1em;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overflow:hover:before {
  background-color: red;
  color: white; 
}

.overflow:after {
  display: none; 
}

.overflow:hover:after {
  display: block;
  content: 'Number of lines exceeds total allowed';
  position: absolute;
  top: calc(1.5em + 5px);
  right: 5px;
  background-color: black;
  color: white;
  padding: 5px;
  font-size: 1em;
  font-weight: 400;
  width: 15em;
}

Other Files

Please include prefixfree.js and minireset.css to every template to ensure that the template is correctly displayed on all major browsers.