Advertisement

The Core framework contains an advertisement solution that will work with responsive and centered page layouts.

Use the buttons to toggle the demo ad placements on this page to see how they affect the page layout. Zoom or resize your browser window to see how the ads will look on different display sizes.

  1. Implementation
  2. Toggling Ads
  3. Loading Ads

Implementation

Ads are placed at the bottom of the page wrapper. The page wrapper, in turn, gets the additional page-wrapper--with-ads class, which will reserve the necessary space to the top and right.

Placement of advertisement containers
<body>
  <div class="viewport">
    <div class="page-wrapper page-wrapper--with-ads">
      <!--
        Lots and lots of other interesting content here
      -->
      <div id="is24-ad" class="ad-superbanner"></div>
      <div id="is24-sky" class="ad-skyscraper--right"></div>
    </div>
  </div>
</body>

Toggling Ads

All ad containers are by default hidden. They are shown only if the <body> element has the respective activation class.

Super Banner
has-ad-superbanner
Skyscraper (up to 300px wide)
has-ad-skyscraper--right
Hockey Stick / Wallpaper
Both of the above
Hidden and un-hidden advertisement placements
<body class="has-ad-superbanner">
  <div class="viewport">
    <div class="page-wrapper page-wrapper--with-ads">
      <div id="is24-ad" class="ad-superbanner">
        <!-- This placement was loaded and is being shown because of the .has-ad-superbanner class on the body. -->
        <span class="some-ad">This product is so great, we won't even try to keep you from giving us money for it!</span>
      </div>
      <div id="is24-sky" class="ad-skyscraper--right">
        <!-- This one's empty, but that's okay because nobody can see it, and no space is being reserved for it. -->
      </div>
    </div>
  </div>
</body>

Generally, these classes will be applied to the body at the time that an advertisement is successfully loaded to avoid wasting space for ads which aren't there.

However, if you are certain that advertisements are always going to be booked on your page and you want to keep the layout from jumping, you can add the classes to your page template from the start.

Loading Ads

For the time being, assembling and executing the actual ad server requests stays up to each application. If you show the advertisement containers by default, you can continue to use your regular ad script without any further changes.

If you want to show the ad containers based on whether a banner was actually loaded, you will need to apply the respective activation class to the body element on successful retrieval of a banner.

Super Banner – 728x90
Skyscraper (individual) – 300x600