leedium / banner-boi

banner-boi is an automated rapid development HTML5 Banner toolkit to help you get those pesky banners out the door quickly and efficiently. It's fully customizable and scaleable for current and future ad providers. Last but not least, it's EASY to use!
http://leedium.github.io/banner-boi
20 stars 4 forks source link

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

1.0.22

1.0.21

1.0.2

1.0.1:

1.0.0:

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

alt text

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 / mark.c.rutter@gmail.com - (Ideas/QA)