Templating Documentation

Getting started

Document templates on Direct Invoice are fully customizable, this documentation will help you to code your own templates.

Overview

Our templates are made of HTML, CSS and Liquid. Liquid is a templating language often used in the Ruby community. It's very simple to use and we invite you to check the following link for an introduction to the markup:
Liquid for designers

For the CSS part of the template, you can use either plain old CSS or Sass with the Sassy CSS syntax (SCSS). This allows you to supercharge your CSS with variables, mixins, etc.

Note

All the variables described in this document are also available in your account default texts.

Structure

HTML structure

All the themes must follow a strict (but simple) HTML structure that looks like this:

<div id="document-header">
  ...
</div>

<div id="document-content">
  ...
</div>

<div id="document-footer">
  ...
</div>

The following table explain these differents elements:

Element Required Description
<div id="document-header"></div> No This represent the header of your template. Everything inside this element will be repeated at the top of each page in the PDF file
<div id="document-content"></div> Yes This represent the content of your template. This is were you should insert your document lines, totals, top and bottom texts
<div id="document-footer"></div> No This represent the footer of your template. Everything inside this element will be repeated at the bottom of each page in the PDF file

Important

You should not add any <body> element in your HTML markup because your template code will be inserted inside the HTML code of Direct Invoice who already has a <body> element.

SCSS structure

Here is an example of a basic SCSS structure to style tour template:

#document-header, #document-content, #document-footer{
  // Template global related style
}

#document-header{
  // Header related style
}

#document-content{
  // Content related style
}

#document-footer{
  // Footer related style
}

Important

Because you don't have any <body> elements in your HTML markup, every CSS rule you want to be global on your template, for example font declaration, must go inside the #document-header, #document-content, #document-footer{ ... } block.