rmcnaughGitHub / HTML5BannerSetup

Basic HTML5 banner setup using DoubleClick. Utilizes Jade, Coffeescript, SASS and Gulp to generate and compile the banners in different sizes.

HTML5 Banner Setup

This repository will get you up and running with a basic layout for a DoubleClick banner set.

It utilizes Gulp to create banner sets from a template, copy existing completed banners to a new size, and compiling.

You must install NPM to generate banners

Start by installing the Node Modules needed

npm install

Pug

The html for the banners is generated with Pug mark up.

Typescript

The javascript is generated using typescript. A basic banner class utilizing polite load is added to the project to extend into the Banner's class.

SASS

Sass is used for all css. A Cross Browser CSS3 mixin file (matthieua/sass-css3-mixins) and basic banner additional mixins are added to the project to get you started

Gulp

Gulp is setup to use 3 main functions

new-banner

This will generate the template files needed to create a banner. Use the "banner" argument to send the folder naming convention. Each variable for --banner needs to separated by a * in the following order:

(--banner)
Prefix          REQUIRED
Width           REQUIRED
Height          REQUIRED
Exp-Width       REQUIRED FOR EXPANDING AND FLOATING UNITS
Exp-Height      REQUIRED FOR EXPANDING AND FLOATING UNITS
Offset-X        OPTIONAL FOR EXPANDING UNITS
Offset-Y        OPTIONAL FOR EXPANDING UNITS

The code should look similar to the following:

gulp new-banner --banner=Banner*728*90

Which will output the folder (Banner_728x90)

This will generate the Pug, Typescript and SASS files to start your project

copy-banner

This will copy the files from one banner to a new banner size. Each variable for --banner and --newBanner needs to separated by a * in the following order:

(--banner)
Prefix          REQUIRED
Width           REQUIRED
Height          REQUIRED
Exp-Width       REQUIRED FOR EXPANDING AND FLOATING UNITS
Exp-Height      REQUIRED FOR EXPANDING AND FLOATING UNITS
     
(--newBanner)
Prefix          REQUIRED
Width           REQUIRED
Height          REQUIRED
Exp-Width       REQUIRED FOR EXPANDING AND FLOATING UNITS
Exp-Height      REQUIRED FOR EXPANDING AND FLOATING UNITS

The code should look similar to the following:

gulp new-banner --banner=Banner*728*90 --newBanner=Banner*300*250

Which will copy the folder (Banner_728x90) to the new folder (Banner_300x250) and rename all the files and sizes.

A duplicate banner set will be generated in the new size and an empty dist folder

build (Default)

This will compile the Pug, Typescript and SASS files to a minified JS file, an normal JS file, a CSS file and HTML file using the banner size as the naming convention in the argument sent. It will then package the distrbution files into a zip in the dist folder and a "zipped" folder in the main directory.

gulp --banner=Banner_728x90

or

gulp build --banner=Banner_728x900

This will compile all the code in the 728x90 folder. It will also compress all images added to _img and zip up the CSS, HTML, minified JS and all images into a zip archive.

package

This compile, shrink and zip all units with the given prefix argument

gulp package --prefix=Banner

This will compile (build) all the code in any folder that has the prefix of "Banner".

NPM Package.json

If the javascript files need to be local, remove _ from the "_overwrite" Object under "js_includes"