Skip to content

Latest commit

 

History

History
112 lines (95 loc) · 5.42 KB

README.md

File metadata and controls

112 lines (95 loc) · 5.42 KB
Raw

HTML5 Banner Boilerplate

Project boilerplate for creating HTML5 animated banners with GSAP.

Download Banner Boilerplate

  • Watch a specific banner folder for changes and update browser during development
  • Compile CSS variables and automatically adds vendor prefixes via POSTCSS
  • Lint HTML, CSS, and JS files to maintain coding standards
  • Verify each banner has a fallback image and is the appropriate size
  • Generate review site
  • Update all banners to platform-specific distribution (e.g. DoubleClick, Sizmek)
  • Minify files and assets then create directory of zip files for distribution

###In This Documentation

  1. Getting Started
  2. File Structure
  3. Resources
  4. References

Getting Started

Dependencies

Make sure these are installed first.

Quick Start

  1. Open banners folder.
  2. Inside, rename _banner-template with the banner size (e.g. 300x250)
  3. In bash/terminal/command line, cd into your project directory.
  4. Run npm install to install required files.
  5. When it's done installing, run one of the tasks to get going:
Tasks
gulp Will show all available tasks
gulp watch
--folder
--controls		 Watch files for changes and update browser
flag: folder to watch for file changes
flag: controls to play/pause & scrub timeline
gulp review Build review page; ready to push to review ftp
gulp deploy
--platform		 Compress files and zip folders for distribution
flag: ad platform distribution (doubleclick,sizmek)

Update package.json

  • name: Project Code (format: YY-aaa-9999). Information used throughout the build/review/deploy process
    • YY: 2-digit Year
    • aaa: 3-digit Client Code
    • 9999: 4-digit Job Code
  • title: Project Title. Added to the review site
  • description: Brief description of project. Added to the review site

File Structure

.
├── README.md
├── package.json                # list of npm packages and some configurations
├── gulp.js                     # build configuration
├── node_modules/               # will be created with `npm install`
└─┬ banners/                   # directory to contain all banner sizes
  ├─┬ _banner-support-files/
  │ ├─┬ ad-platform/            # collection of platform-specific documentation
  │ │ ├── doubleclick.md        # documentation; script blocks will be injected via `deploy` task
  │ │ ├── sizmek.md             # documentation; script blocks will be injected via `deploy` task
  │ │ └── EBLoader.js           # required Sizmek script; must load first before ad is displayed
  │ └─┬ controls/
  │   ├── _banners.js           # installs required development assets
  │   ├── banner-controls.js    # installs/instantiates control bar
  │   └── banner-controls.css   # styles for control bar
  └─┬ _banner-template/         # initial banner setup; duplicate to customize
    ├── index.html              # The ad file, with the ad configuration and init code
    ├── fallback.jpg            # required; Formats accepted: JPG, GIF, PNG
    └─┬ assets/
      ├─┬ css/
      │ ├── style.css           # compiled styles; will be created with `watch`, `review`, or `deploy` tasks
      │ ├── source.css          # main styles; compiled by postcss into `style.css`
      │ └── fonts/              # local font files (optional)
      ├─┬ img/                  # graphic files: jpg, gif, png, or svg
      │ └── keyframes/          # keyframe graphics from PSD for layout/placement; removed via `review` task
      └─┬ js/
        └── script.js           # customized banner animation script

Resources

Greensock/GSAP
Greensock 101 - Greensock Tutorials for Beginners
Greensock Cheat Sheet PDF

References

IAB.com
iab.com/guidelines
iab.com - HTML5 for Digital Advertising 2.0 PDF
iab.com - Display Format Guidelines PDF

DoubleClick
DoubleClick Starter Files
DoubleClick CDN/Shared Libraries
Rich Media Gallery

Sizmek
Sizmek Banner Formats
Building Ads / Creating HTML5 Banners
Sizmek CDN/Shared Libraries

Roadmap

  • lint on watch: html, css, js
  • minify on build: html, css, js
  • optimize on build: image assets (jpg, gif, svg)
  • move tasks into a gulp subfolder and separate files
  • update to gulp 4