Core Framework v1.2.0 – Documentation

Advertisement

The ad styles contained in the Core framework work with all full-width layouts by placing the ads on the far right of the display and shrinking the actual page content accordingly, making sure the page wrapper will never shrink below the minimum width of the desk state breakpoint.

You can use these buttons to toggle the dummy super banner and skyscraper ads on this page to see how they affect the page layout.

  1. Implementation
  2. Showing Loaded Ads
  3. Contained vs. Uncontained

Implementation

Ads are placed at the bottom of the page wrapper. The required styles are applied through the additional page-wrapper--with-ads and page-wrapper--with-ads--contained classes, which will see to it that the required space can be reserved on the page wrapper whenever an advertisement is present.

Placement of advertisement containers
<body>
  <div class="viewport">
    <div class="page-wrapper page-wrapper--with-ads page-wrapper--with-ads--contained">
      <!--
        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>

Showing Loaded 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 200px wide)
has-ad-skyscraper--right-200
Skyscraper (up to 300px wide)
has-ad-skyscraper--right-300
Hockey Stick / Wallpaper
A combination 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 page-wrapper--with-ads--contained">
      <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 has been reserved on the right. -->
      </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 respective body classes to your page template from the start.

Contained vs. Uncontained

Coming soon…

Super Banner – 728x90
Skyscraper – 160x600