Banners - HTML
• A banner is a zip-package containing a HTML file, CSS file, and optionally JavaScript file and assets in a asset directory.
• The banner is uploaded into SharePoint as a zip-package with a predefined structure.
• The banner is embedded into the including page to a wrapping <div> element with a special classes.
• The banner must not rely on external assets upon load time.
• The banner must be responsive and follow the defined breakpoints. The minimum proper expected width of layout is 320 px.
1. Mobile (width <= 767 px)
2. Tablet (width > 767px and width <= 960 px)
3. Desktop (width > 960 px and <= 1279 px)
4. Wide desktop (width >= 1280 px)
2
Package structure
• The banner package should contain– /banner.html – Static and valid HTML5 document. The content of <body> element is
copied as is to a wrapper element on the appropriate page.
– /banner.css – The styles associated with the banner.
– /banner.js – The script associated with the banner.
– /assets/* – Static assets (e.g. images) needed by the banner.
• The banner.css and banner.js are linked to the wrapping page.
• All asset references must be relative to the css file, since the exact location of the assets are decided on the deployment.
3
The wrapping element
• The wrapping element is a div, with three special CSS classes, one of which you must define your own.
• The predefined classes are– "f-banner" – Present always on a banner.
– "f-banner-COLS" – Supplementary class, providing additional information of the column count the banner is embedded in (e.g. "f-banner-1").
– "f-banner-CAMPAIGNID – A class defined an provided by YOU to identify the banner, (e.g. "f-banner-kraft-i-vattnet"). All styles, script must be written to use this class as working reference.
• To expedite your banner development, the banner package contains a full, valid HTML5 document. The content of body element is copied as is to the wrapping element.
4
The wrapping element – an example<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, minimal-ui" /> <meta name="robots" content="noindex" /> <link rel="stylesheet" href="banner.css" /> <script src="banner.js"></script> <title><!-- ... --></title> </head> <body class="f-banner f-banner-3 f-banner-kraft-i-vattnet"> <!-- banner content --> <h2>Hello, World!</h2> <!– end of banner content --> </body></html>
<div class="f-banner f-banner-3 f-banner-kraft-i-vattnet"> <!-- banner content --> <h2>Hello, World!</h2> <!– end of banner content --></div>
Reference implementation of
banner.html.
The banner
5
Style requirements
• Because of legacy the styles are written desktop first and breakpoints will alter the desktop experience to fit onto mobile, tablet and wide desktop.
• A unique campaign CSS class must be defined, and it must start with "f-banner-". It must be used when referring to the campaign elements from script and style. The wrapping element will have three classes.– f-banner
– f-banner-COLS (e.g. "f-banner-3")
– f-banner-CAMPAIGNID (e.g. "f-banner-kraft-i-vattnet")
• All style selectors must be defined starting with class "f-banner-CAMPAIGNID".
• Classes "f-banner" and "f-banner-COLS" can be used to help implement banners that fit into different banner places.
• Banner must never affect flow of content outside the banner area. If floats are used, they must be cleared.
6
Style requirements – an example
/* Basic styles for layout 3, desktop */
.f-banner-kraft-i-vattnet {
position: relative;
height: 450px;
background: url(assets/bg.jpg) center center no-repeat;
}
.f-banner-kraft-i-vattnet h2 {
position: absolute;
top: 50px;
left: 50px;
color: white;
}
@media (device-max-width: 691px) and /* ... */ {
/* Responsive styles for layout 1, mobile */
.f-banner-kraft-i-vattnet {
background: url(assets/bg-mobile.jpg);
}
}
The assets must be
referred with a relative address.
The styles must contain the
three breakpoints
and four sets of styles for layouts.
7
Script requirements
• Banner creators can rely that jQuery, 1.10 or newer is provided as $ symbol by the platform and should not include it.
• Banners wanting to perform initializations should do it via jQuery.ready or its aliases, never by setting window.onload, or adding an event listener with capture.
• During load time the banner must only access assets provided in the banner package.
• Any behavior implemented in script must support both mouse and touch fully.
• Banner must not manipulate document outside its wrapping HTML element.
• Accessing elements in the banner must be always referred with the campaign class (e.g. "f-banner-kraft-i-vattnet").
8
Script requirement – an example
$(function() {
var banner = $('.f-banner-kraft-i-vattnet');
banner.find('h2').on('click', function() {
/* Perform an action */
});
});
Perform initialization always in
jQuery.ready.
Refer banner elements always by the campaign class
