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.
Implementation
Ads are placed at the bottom of the page wrapper. The page wrapper, in turn, gets the additional page-wrapper--with-ads
and page-wrapper--with-ads--contained classes, which will reserve the necessary space to the top and right.
<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>
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
<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 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.
