Skip to main content

Boilerplate Structure

MAIN FOLDER
├─ index.html
│
╰── BANNER
    ├─ config.json
    ├─ index.html (mutiple HTML files for a multi-panel format)
    │
    ├── ASSETS
    │
    ├── CSS
    │   ╰─ style.css
    │
    ╰── JS
        ╰─ main.js

All formats have the same basic boilerplate structure, shown above. Multi-panel creatives have intuitively-named HTML files for each panel, instead of index.html, for example top.html, left.html and right.html.

/index.html​

The outer index.html file simulates the hosting publisher website. This is used to display the ad during local development. It should not be edited or uploaded.

The banner folder contains the creative files. The zipped contents of this folder (not the folder itself) should be uploaded to the platform.

/banner/config.json​

{
    "clickurl": "http://www.example.com",
    "format": "Footer Ad",
    "showexpanded": "no",

    "height": {
        "collapsed": "13%",
        "expanded": "25%"
    },

    "style": {
        "background": "white"
    }
}

The config.json file contains some basic editable values, for example the default sizes of the creative and the default click-through URL. Please note, this file is mainly for development use. When a creative is live, these values can be over-written. If the file contains a showexpanded property then setting it to yes will show the creative in its expanded state by default.

/banner/index.html​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//cdn.justpremium.com/Justpremium/boilerplate/css/premium_2.0.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- START OF CUSTOM HTML -->

    <!-- END OF CUSTOM HTML -->
    <script src="js/main.js"></script>
    <!-- <script src="//cdn.justpremium.com/Justpremium/boilerplate/js/jp-controls_0.6.2.js"></script> -->
    <!-- <script src="//cdn.justpremium.com/Justpremium/boilerplate/lib/gsap_3.6.0.js"></script> -->
    <script src="//cdn.justpremium.com/Justpremium/boilerplate/js/premium_2.4.7.js"></script>
  </body>
</html>

The .html file(s) contain(s) the HTML to be rendered for the creative. If the format has one panel, the file is named index.html. If it consists of multiple panels, each file is intuitively named and the body tag will have an ID, for example <body id="body_top">. Body tag IDs must never be edited.

Optional script tags for libraries on our CDN are in place at the bottom; uncomment as required. The script tags for main.js and the PremiumJS library must never be removed or commented. Please note that the order of the script tags is important and should left as it is.

/banner/assets​

This folder is for all images, videos, fonts and other assets the creative needs.

/banner/css/style.css​

Place your CSS in here. Please note that there is already some default css included in the boilerplate, for example all elements have padding:0, margin:0 and box-sizing:border-box.

/banner/js/main.js​

'use strict';
var Premium = Premium || {};

Premium.creative = {
  init: function () {
    /* START OF CUSTOM JS */
    /* END OF CUSTOM JS */
  },
};

Place your Javascript between the lines START OF CUSTOM JS and END OF CUSTOM JS. This will be called after the HTML, CSS and Javascript scripts are loaded and the PremuimJS library is ready.