Input Best Practices

This section will map out best practices for the various input types available in Outfit and give designers a few different examples of how and when to use these input types.

If you are yet to read the previous section on creating inputs, please read that first before moving on. It gives you a great insight on input creation with Mustache and a few other nifty tips that will be useful to know moving forward.

Text

Text inputs are the most widely used input type. They are useful for everything like simple text strings, headlines, URL’s and even fully fledged body copy sections. When creating a text input it’s important to remember the correct Mustache syntax to use for the proper display of text when editing a document.

{{ input }} = Remember double bracing to escape special characters to HTML

{{{ input }}} = and triple brace for everything else.

When creating text inputs designers have the ability to turn on and off certain formatting types, alignments, text colour and even the ability to add an image within the text section to get the most out of a text input.

EXAMPLE 1 - URL

As an example the most stripped back use case for a text input would be for a URL. When we make this input we have the ability to set some formatting options however for a URL we don’t want any so we can leave that setting unchecked.

<a href="{{ link }}">Sign Up Now!</a>

inputs

And if we were to Inspect that Link element we would see the URL neatly within the href where the tag used to be.

inputs

EXAMPLE 2 - Headline

To determine the correct styling for the headline we can wrap a triple braced tag in a h1.

<h1>{{{ headline }}}</h1>

Unlike the above example we want the ability for the headline to line break so we can turn on basic formatting.

inputs

EXAMPLE 3 - Body Copy

For larger sections of copy I suggest using the following markup. By wrapping the body-copy input in a div we can keep the injected markup contained and easily searched when inspecting our markup.

<div>{{{ body-copy }}}</div>

On the input creation end we can add all the formatting styles, as well as some other little goodies like text-colour options and inline images (which I’ll talk about in a sec).

inputs

If we were to then to see what that would look like when editing we have a very customisable text box with multiple text formatting options.

inputs

Using the Text-Colour formatting option

Checking the text colour option gives authors the ability to change the colour of a defined text selection. There are two options to choose from (light and dark).

inputs

The colours are to be defined in the template’s CSS. When setting the text colour, it adds a span around the text that can be targeted (as you can see below).

.tinymce_style--dark {
  color: #000000;
}

.tinymce_style--light {
  color: #ffffff;
}

Using Inline Image option

While it is suggested to handle most images through the Image input, there are cases where adding an image within a text section is feasible (ie. for long free-flowing copy sections). To add an inline image, we first upload the image via the Asset library, then grab the link from the newly uploaded image.

inputs

From there we go to the document(s) we are editing and within the text input with the inline image option and click on the image button. We are then prompted to paste in the image URL, as well as a couple of other options for image formatting.

inputs

Personally I like to create a set behaviour for inline images within the CSS so they all are correctly formatted and with a correct aspect ratio.

Number

A number input is defined by setting a min and max value range, with a value for the steps between that range. These number inputs can be set as either a range slider or a Field value, which is much like a text input.

inputs

A number input is great for defining the value of a style for a particular element, the price of a product (that is always within a certain range) or even size of an element.

EXAMPLE 1 - Opacity Slider

We can use a number input to determine the opacity of a background colour on an element. We know that the maximum value of CSS opacity is 1 and the minimum is 0. So we would have the following markup.

<div style="opacity: {{ opacity }};"></div>

With the following values for the slider. The step increment to something very minuscule (for this it uses 0.01) so we can get a nice smooth slider.

inputs

inputs

EXAMPLE 2 - Price Field

We can also use a number input to define the price of the product. This allows a designer to set minimum and maximum values so the price cannot be set to something exorbitantly high or outrageously low.

<h1>Now at the right price of ${{ price }} a month</h1>

inputs

inputs

EXAMPLE 3 - Font Size

Finally we can give authors the ability to set an element’s size. This could be useful to set a logo’s size relative to the content, or even the font size of a headline.

<h1 style="font-size: {{ font-size }}em;">Headline</h1>

Image

An image input hooks into Outfit’s Asset Library to provide authors with the necessary image content they need to populate a document. An image input can be locked to a specific Tag (which is set in the Asset library), so only a certain amount of images can be used for that input, or we can unlock the whole Library and let authors upload and use their own image content. Image inputs can hook into both an <img> tag or <div> in HTML. Personally I think setting an image as a CSS background-image is a much better way of handling images as they give us the most control in terms of positioning, sizing and handling aspect ratios.

<img src="{{{ image }}}" width="" height="" />
<div class="background-image"></div>

<style>
  .background-color {
    background-image: url("{{{ image }}}");
    background-size: cover;
    background-position: center;
  }
</style>

inputs

Background Image (with reposition tool)

We can now also use an Image input to define a resizable and customisable full-width and full-height background image. This tool works great for digital ads and print ads with large scale background images and it allows authors to set a background image of their choice and then reposition and resize that image within the document space.

background resize

Setting up a resizable background image is a little different to a default image input. Instead of using a Mustache tag within an <img> or <div> tag we can simply add a triple braced tag somewhere inside the <body> element (I like to add it just inside the opening tag).

<body>
  {{{ resizable-background-image }}} --- other content ---
</body>

Within a template’s repository, setting up the input is as simple as navigating to the Inputs tab, and then when Creating a New Input, select the Image input and check the box, “Is this a resizable background?”.

So how does this all work?

We use a standalone tag because Outfit actually injects a series of markup in order for the background to be resized and repositioned correctly. This markup is z-index'ed to the back of all the objects. This means that if there are any other full-width/height elements over the top, it could overlap with the background image and hide it. See the diagram below for how the layers work.

background image layer setup

So remember to only include elements that would partially overlap with the background image, like a logo, text or any background embellishments to enhance the background image.

We can still target that injected code for later use however. So let’s say we want to target the image to grayscale it. See below for an example of the injected code. The CSS class outfit-resizable-background on the outer div will never change and can be easily targeted.

<div
  class="outfit-resizable-background"
  style="position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px; transform: scale(0.9795); transform-origin: 0px 0px 0px;"
>
  <img
    left="3279"
    top="1777"
    zoom="0.9795"
    src="/assets/images/unsplash/photo-1470897655254-05feb2d2ab97.jpeg"
    style="position: absolute; left: -3279px; top: -1777px;"
  />
  <img
    left="3279"
    top="1777"
    zoom="0.9795"
    src="/assets/images/unsplash/photo-1470897655254-05feb2d2ab97.jpeg"
    style="position: absolute; left: -3279px; top: -1777px;"
  />
</div>
.outfit-resizable-background img {
  /* Place any Resizable Background Styles here */

  filter: grayscale(1);
}

Choice

A choice input lets authors choose from a predefined set of values to populate or customise a document. Choice inputs can be used for a variety of methods and are extremely useful.

At Outfit we use choices a lot to create CSS classes to then define template themes, layouts and variety of CSS controlled options. Beyond that we can use choices to choose between an approved set of headlines, a style option on an image or a choice between different logo lockups.

EXAMPLE 1 - Pre-approved Content choice

The most simple and easy to implement use of a Choice input is to switch out the value of content. A good example of this is for setting pre-approved choices of copy for a headline. The setup is almost exactly the same as you would for a text input.

<h1>{{{ headline }}}</h1>

Then we can create the headline options via the New Input screen.

inputs

inputs

EXAMPLE 2 - Theme Choice

We can control brand theming with choices quite easily by adding a class on a wrapping element, or even the body tag in the markup. By setting a CSS class on the body we can then target the child elements of the new CSS class and style it accordingly. Imagine we have two themes (red and blue) that changes the colour of the background image when it’s set (notice how we use Mustache conditional logic to remove the data of the {{ theme }} input if there is no data, and then add a default value at the same time).

<style>
  .blue-theme .background-image {
    background-image: #000eff;
  }

  .red-theme .background-image {
    background-image: #cc0000;
  }
</style>

<body
  class="{{#theme}}{{ theme }}-theme{{/theme}}{{^theme}}red-theme{{/theme}}"
>
  <div class="background-image"></div>

  <h1>{{{ headline }}}</h1>
</body>

inputs

EXAMPLE 3 - Multi Choice Selections

We also now have the ability to extend the usability of our Choice input to include multi-select optionality, which will allow an author to select multiple choices. By allowing this functionality we can now increase the flexibility of data that is retained in a template, especially when we need to allow an author to select from a pool of choices to:

  • Plot pre-defined points on a map
  • Add multiple products onto a product sheet
  • Tailor the list of pre-defined benefits for a sales or marketing pitch.

multi-select-choice-admin-setup

Unlike a normal choice input, the multi select option relies on JS to iterate through an array of the selected choices. However this will all still function through the standard mustache tag framework.

Template Logic

<body>
  <div id="target"></div>

  <script>
    var data = JSON.parse("{{{ multi-choice-products }}}");

    var destination = document.querySelector("#target");

    for (var i = 0; i < data.length; i++) {
      var productHeading = document.createElement("h1");
      productHeading.innerHTML = data[i];

      destination.append(productHeading);
    }
  </script>
</body>

Code Output

<body>
  <div id="target">
    <h1>option-1</h1>
    <h1>option-2</h1>
    <h1>option-3</h1>
  </div>

  <script>
    var data = JSON.parse('["option-1", "option-2", "option-3"]');
  </script>
</body>

Choice Input for Authors

The most notable difference for authors is the adjustment to the multi-select tick.

multi-select-choice-author-view

Colour

Our newest Outfit input is the Colour input. It gives authors the ability to add a custom colour to an element. While it’s understandable that managers don’t want author’s setting random colours and perhaps creating off-brand material, it now gives those brands that have the capability to use multiple colours to create fully customisable collateral.

<div style="background-color: {{ color }};"></div>

inputs