How i’ve made an ad with HTML5, CSS3 & ZeptoJS

I’ll put here two examples; one of a regular banner and another of an expandable one.

Now when the giants switch from Flash to HTML5, all others did, or will do the same. I personally think this is a good movement for the web, and also for creative agencies because:

  • Flash licences were expensive;
  • Is now easier to handle with APIs directly in HTML, since they’re on the same layer;
  • A frontender can easly turn existing website components into ads;
  • HTML/SCSS code is easier to maintain rather than AS/FLA files.

Stack we’re going to use is made of:

  • Gulp for handling tasks (i’ll describe each of them later)
  • Bourbon, as a SASS mixin library
  • Zepto, minimalist JavaScript library for modern browsers
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

Tree Structure

Tree Structure

Public directory will be automaticaly created while it’s content will be generated via grunt tasks — so you don’t have to create it.

You can use custom fonts by placing them inside /resources/fonts


Aa i said earlier, we’re going to use Gulp to simplify our workflow; uglifying, minifying, sprite generation, error hinting, etc; And for doing that, there are few dependencies.

npm and Node JS are required! grab them here; they ar both packed into a single package.

  1. open your console and go to your directory root
  2. npm init to generate the package.json file

For those of you lazy enough, i created a gist here; Put it into your root and hit npm install.

For the brave ones …

3. npm install — save-dev gulp gulp-concat gulp-if gulp-jshint gulp-plumber gulp-ruby-sass gulp-sourcemaps gulp-uglify gulp-util jshint-stylish sprity sprity-sass

That’s it! We have our dev dependencies installed.

4. Create gulpfile.js — this file holds the tasks. A gist version here.

5. Bourbon is also a dependency, i use it as a ruby gem; Let’s install it into /resources/scss with bourbon install.

AD #1 — The square

AD #2 — The Mouseover

in progress …

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.