banner-boi :)

EASY TO USE Automated HTML5 Standard Banner Creation Tool to save you crazy amounts of time.

Version 1.1

Example

Release history

1.1

• added local spritesheet overrides for each creative, allowing for greater customizations across sizes
• added loop/replay count config and display
• added banner package file size check for < 200KB to preview page (pass/fail)
• added backup gif preview on preview page
• added date/time timestamp to preview page for versioning
• optimizations(baked in css, removed comments, clean whitespace)

1.0.22

• fixed ie11 radial gradient issue, with fallback

1.0.21

• add utf-8 encoding

1.0.2

• add svg icons/helpers example (cta)
• add 970x250 layout
• fixed inactive size folder from being included in final bundle

1.0.1:

• added standard iAB clickTag variable for various providers
• added standard meta data for fixed sizes

1.0.0:

• modular js includes
• refactored files / inheritance structure
• pre/post polite load sprites

EASY TO USE Automated HTML5 Standard Banner Creation Tool to save you crazy amounts of time.

Includes

Multi Provider support for DoubleClick, Sizmek, ... more to come!

Customizable to add more providers.

8 of the most popular sizes.

[300x250, 336x280, 120x600, 160x600, 300x600, 970x250, 728x90, 468x60]

PNG image optimization

spritesheet generation for non responsive images

GSAP - Greensock Timeline / TweenLite CDN for animations.

SASS, css-pleeease, pre post css compiler.

ZIP Compresson on provider packages

Full Support for IE9 and above.

Handlebars for templating.

html minification

ability to override master version.

Max File(200KB) warning / test

Loop/Repeat count

browser-sync

Coming SOON! - Apple iAd support

Getting Started

This plugin requires Grunt

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may run the application with this command:

Installation of packages

  $ npm install
  OR
  $ sudo npm install //if you get permission errors

Configure bannerConfig.js - ADD more sizes and providers here

  var bannerConfig = {
      dest: 'dist',
      campaignName : "banner-boi-preview",
      providers : [
          {
              id:"dck",
              clickTag:"https://www.doubleclickbygoogle.com/"
          }
          //{
          //    id:"sizmek",
          //     clickTag:"http://www.sizmek.com"

          //},
          //{
          //    id:"adrime",
          //     clickTag:"http://www.adrime.com"
          //}
      ],
      sizes : ["300x250","336x280","120x600", "160x600","300x600","728x90","468x60","970x250"],
      minifyCSS: true,
      loops:0,
      reloadDelay:3000,
      gsapSize:29.3,
      backupImageType:'.gif'
  }
  module.exports = bannerConfig;

Modify the various html templates(.hbs) styles(.scss), .js

  -/src/  //put non sprite images(<img>) here
    --images/sprites/  //where post polite load images go, generated:  spritesheet.png
    --images/sprites-polite/  //where pre polite load images go, generated spritesheet-polite.png
    --/scss/  //SASS styles, css overrides for banner sizes
    --/templates/
      --/partials   //overrides for js, and markup if need be
      --/includes   //provider specific api
      --/provider-template  // Shouldn't have to change these! Only add new ones as required

Start Application

  $ grunt

View App (provider doubleclick)

http://localhost:3000/dck/

Contributors

Mark Rutter / [email protected] - (Ideas/QA)