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 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)

Package structure The banner package should contain –/banner.html – Static and valid HTML5 document. The content of 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. 2

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. 3

The wrapping element – an example 4 Hello, World! Reference implementation of banner.html. The banner

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. 5

Style requirements – an example 6 /* 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; (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.

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"). 7

Script requirement – an example 8 $(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