H5 tools site

Code

You can clone the repo here: https://github.com/CraftNY/HTML5
(Note: you will be required to have permissions to view the repo, contact Craftww digital)

generator-craft-banner v2.1.0

Yeoman generator used to scaffold production files for Craft/McCann banners.

Getting Started

Before pulling the repository, make sure Node is installed. This project leverages NPM to manage production dependencies. You can verify that Node and NPM are installed by using the terminal to execute:

npm -v

Once installed, use NPM to install the Yo CLI tool for running generators with the command:

npm install -g yo

Next, verify Ruby and Compass are installed:

gem -v
compass -v

If Compass is not installed, its gem can be installed with the command:

gem install compass

Install gulp and gulp CLI globally.

npm install -g gulp
npm install -g gulp-cli

Windows users may need to change their Git configuration file to allow for longer file names.

git config --system core.longpaths true

Cloning and Linking to NPM

First, clone the generator a local folder using Git and download all NPM dependencies:

git clone git@github.com:CraftNY/HTML5.git
cd HTML5/bannerprocess/generator-craft-banner/
npm install

Now, make the package available globally to NPM:

npm link

Generating a Project and Using gulp

Create a working folder for a banner and navigate to it using terminal:

cd *folder_name* && cd $_

Run the Yo CLI to use the generator.

Use Yo to generate the scaffolding:

yo craft-banner

publisher: select - banner publisher

name: String - the name of the banner (alphanumeric, underscore, and dash)

width: int - non-negative integer for the width

height: int - non-negative integer for the height

expandable: boolean

expandable width: int - non-negative integer for the width

expandable height: int - non-negative integer for the height

size(kb): int - non-negative integer for maximum banner size

Greensock: boolean - include Greensock via CDN

static IE fallback: boolean - deafult to static image if IE browser

IE fallback version: select - version to start static fallback

numClickTags: int - 1-3 click tags (may not be supported by all publishers)

Within your working folder, three notable folders will be created for production:

  • dist folder for optimized build (will automatically update, not for editing)
  • src working folder for assets, JS, and HTML
  • sass working folder for any Sass changes that will be compiled to CSS

Notes

  • Most commands will need admin privileges. Try sudo before each command if encountering errors.
  • Static image should be placed at the root level of the src folder. Any other images are placed in the img folder.

Gulp Tasks

Default

Use the gulp task gulp (or the default gulp task) to monitor any Sass or JS changes. However, running gulp with by default run gulp watch as well

  • any Sass changes will be compiled into styles.css
  • any JS changes will be linted using JSHint
gulp

Build

build minifies and concatenates the src folder, generates a build for deployment in the dist folder, and compresses to a zip file in the main project folder.

gulp build

Sass

sass is called during the watch task but can be used to force a compilation of the Sass files.

gulp sass

Tests

There are 5 tests that are run on the dist folder whenever the gulp build task is run. 1) The zipfile should be under the k weight set by the developer 2) The static image dimensions matches the dimensions of the creative 3) All assets that are in the dist folder are referenced at least once -to see which assets are not referenced, go to the test in tests.js, and uncomment // console.log(assets[i]); in the function assetCheck(); 4) There are less than 15 assets total 5) There should be no http calls

SASS and sprite sheets

A sprite sheet is a series of images (usually animation frames) combined into a larger image (or images). For example, an animation consisting of eight 100x100 images could be combined into a single 400x200 sprite sheet (4 frames across by 2 high).

SASS can be used to generate sprite sheets.

First, create a folder "fullscreen" in your images/ directory.

Next, add the sprite-map variable to your styles.scss file.

$fullscreen: sprite-map("fullscreen/*.png");

Now you can use this variable wherever you want to use an image as a background. So instead of this:

#f1_copy{
	background: url("../img/f1-copy.png") no-repeat; 
}

you can write this:

#f1_copy{
	background: sprite($fullscreen, f1-copy);
}

...and SASS will compile the images into a single image, and generate the background and background-positioning CSS.

Retailer Versions

Sometimes the requirement is to create multiple versions of the same ad with different retailer logos. This can be automated with the grunt build tool.

First, generate the logo assets from Adobe Photoshop and add all to the src/img/fullscreen/ directory.

Next, create a file called env.json on the root level of the project (see image above). This file will contain the names of the retailers.

{
    "VERSIONS" :  "generic,amazon,cvs,walmart,walgreens,ulta,target"
}

Next, modify the src/index.html by adding the following classes to the <body>:

 <body class="__versions buyNow">

The build tool will replace "__versions" with the retailer names from the env.json file.

Within the <body> of the index.html, include a single node for the retailer logo. This node will be styled in each version to contain the appropriate image.

 <div id="logo2"></div>

Lastly, update the /sass/styles.scss to include a class for each retailer:

#logo2 {
	@extend .abs-pos;
}
.amazon #logo2{
	background: sprite($fullscreen, Amazon);
}
.walmart #logo2{ 
	background: sprite($fullscreen, Walmart);
}
.cvs #logo2{ 
	background: sprite($fullscreen, CVS);
}
.ulta #logo2{ 
	background: sprite($fullscreen, ULTA);
}
.walgreens #logo2{ 
	background: sprite($fullscreen, Walgreens);
}
.target #logo2{ 
	background: sprite($fullscreen, Target);
}

You may need to modify styles of other elements to accommodate the logo. In this case, the generic version cta read "learn more" and the retailer versions read "buy now."

#cta {
	@extend .abs-pos;
}
 .buyNow #cta {
	@extend .abs-pos;
	background: sprite($fullscreen, cta_buyNow);	
}

 .generic #cta {
	@extend .abs-pos;
	background: sprite($fullscreen, cta_learnMore);
}

Running grunt build will generate an additional distribution folder named /dist-alt, containing a complete build of each retailer version.