Adform Styles Library Documentation

Updated: 02/04/2019. Version: 0.9.0

AdformStyleLib

Description

Adform Styles Library has been created to have the most common banner element styles and CSS utilities in one place. Download complete Style Guidelines PDF for more detailed information. All styling rules described in this document have been defined according to Suit CSS specifications.

Initialization

In order to start using Adform Styles Library, load it inside <head></head> tags in your index.html document.

 <link rel="stylesheet" href="//s1.adform.net/banners/scripts/components/styles/Adform.Styles-1.css" />

The following sections define each element’s styles that are used in Adform Styles Library.

Fonts

The default font for Adform banners is Source Sans Pro, the first Adobe Open Source typeface, with its Regular and Semibold variations. Additional symbols, used for close buttons and navigation controls, are available through Adform font.

To include fonts in your stylesheet, simply import them through @font-face declaration:

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('//s1.adform.net/Banners/Scripts/assets/fonts/SourceSansPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('//s1.adform.net/Banners/Scripts/assets/fonts/SourceSansPro-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "adform";
    src: url("//s1.adform.net/Banners/Scripts/assets/fonts/adform.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

Adform Fonts

Reset

In order to even out browsers’ default behaviour, a bunch of instructions for simple elements reset has been added. This way undesired offsets, margins or borders can be prevented from affecting banner layout.

html,
body {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img {
    border: none;
}
ol,
ul {
    list-style: none;
}
a {
    text-decoration: none;
}

Utilities

According to Suit CSS, utilities classes are prefixed by u- and followed by lower camel case notation.
Adform Styles Library sets full size and centering utilities:

/* Full size class */
.u-sizeFull {
    width: 100%;
    height: 100%;
}
/* Horizontally centered class */
.u-hCentered {
    position: absolute;
    left: 50%;
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}
/* Vertically centered class */
.u-vCentered {
    position: absolute;
    top: 50%;
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
/* Horizontally and vertically centered class */
.u-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Example:

Utilities Classes

<div class="u-hCentered"><span>.u-hCentered</span></div>

<div class="u-vCentered"><span>.u-vCentered</span></div>

<div class="u-centered"><span>.u-centered</span></div>

<div class="u-sizeFull"><span>.u-sizeFull</span></div>

Containers

There is one non-removable element inserted into all Adform banners source code:

<div id="adf-banner" class="adf-Banner"></div>

This is the main banner container and all accessory elements are inserted as children, so styles instructions inherited by all other elements are defined together with its own ones.

Expandable banners have distinct containers for expanded and collapsed stages. Banners featuring videos usually need a click area container, so as not to interfere with videoplayer controls.

New containers should follow Component Names specifications - all classes are composed with .adf- prefix followed by upper camel case element name.
Modifiers must be written in lower camel case and separated from the component name with two hyphens.

.adf-Banner {
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    color: #fff;
}
.adf-ClickArea {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.adf-Collapsed {
    position: absolute;
}
.adf-Expanded {
    position: absolute;
    display: none; /* to invert in custom styles if initially expanded */
}

Note: .adf- prefix is used in all classes except Utilities

Example:

Adform Containers

Adform Containers

Adform Containers

Adform Containers

<div id="adf-banner" class="adf-Banner">
    <div id="adf-collapsed" class="adf-Collapsed adf-Border">
        <div id="adf-click-area-collapsed" class="adf-ClickArea adf-Background"></div>
    </div>

    <div id="adf-expanded" class="adf-Expanded adf-Border">
        <div id="adf-click-area-expanded" class="adf-ClickArea adf-Background"></div>
    </div>
</div>

Buttons

Many banners include button elements that help interact with ad functionalities.
Class naming doesn’t differ from Components Names guidelines: all buttons require main buttons class, additional classes just extend its styles.

.adf-Button {
    position: absolute;
    cursor: pointer;
    font-size: 14px;
    line-height: 14px;
    padding: 7px;
    color: #fff;
    display: block;
    z-index: 20000;
    background: #005F8C;
}
.adf-Button:hover {
    background: #5AAAD2;
}
.adf-Close {
    background: #fff;
    color: #005F8C;
    top: 15px;
    right: 15px;
}
.adf-Close::after {
    font-family: "adform";
    content: "\2716";
    padding-left: 5px;
    line-height: 14px;
    vertical-align: middle;
}
.adf-Round {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.adf-Round::after {
    padding: 0 1px;
}

Example:

Adform Buttons

<div id="adf-button" class="adf-Button">Simple Button</div>

<div id="adf-close-button" class="adf-Button adf-Close">Close Button</div>

<div id="adf-close-button" class="adf-Button adf-Close adf-Round"></div>

Controls

Control elements can help you navigate through banner panels. Class assignment is similar to buttons, main class is extended by modifiers and their pseudo elements.

.adf-Controls {
    height: 29px;
    width: 29px;
    line-height: 29px;
    text-align: center;
    color: #005F8C;
    background-color: #fff;
    position: absolute;
    z-index: 9999;
    cursor: pointer;
}
.adf-Controls:hover {
    background: #5AAAD2;
    color: #005F8C;
}
.adf-Controls--left {
    left: 0;
}
.adf-Controls--right {
    right: 0;
}
.adf-Controls--up {
    top: 0;
}
.adf-Controls--down {
    bottom: 0;
}
.adf-Controls--left::after {
    font-family: "adform";
    content: "\2190";
    vertical-align: middle;
}
.adf-Controls--right::after {
    font-family: "adform";
    content: "\2192";
    vertical-align: middle;
}
.adf-Controls--up::after {
    font-family: "adform";
    content: "\2191";
    vertical-align: middle;
}
.adf-Controls--down::after {
    font-family: "adform";
    content: "\2193";
    vertical-align: middle;
}

Example:

Adform Controls

<div class="adf-Controls adf-Controls--left"></div>

<div class="adf-Controls adf-Controls--right"></div>

<div class="adf-Controls adf-Controls--up"></div>

<div class="adf-Controls adf-Controls--down"></div>

Removable Elements

Adform banner default design includes elements that are usually removed rather than edited while user creates his own ads.

.adf-Logo {
    background: url('../images/logo-white.svg') no-repeat 50% 50%/100%;
    position: absolute;
    top: 15px;
    left: 15px;
    height: 28px;
    width: 94px;
    cursor: pointer;
}
.adf-Info {
    font-size: 14px;
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    line-height: 14px;
}
.adf-Info-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.adf-PanelTitle {
    font-weight: 600;
    color: #005F8C;
    position: absolute;
}

Example:

Adform Removable

<div class="adf-PanelTitle u-vCentered">This is Panel Title</div>
<div class="adf-Info">
    <div class="adf-Info-title">This is Info Title</div>
    This is Info text
</div>
<div class="adf-Logo"></div>

Video

Though not all banners feature a videoplayer to stream their content, most of Adform templates include video elements, so generic styles have been added to this library.

.adf-Video {
    background: #000;
}
.adform-video-container,
.adform-video-container video,
.adform-video-container .adform-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 no-repeat 50% 50%;
}

Note: videoplayer elements have a different class prefix .adform- due to VideoPlayer Component code rendering.

Elements Design

In most cases, recurring styles are applied to containers and other elements. All those classes follow a similar naming rule as described above: prefix is followed by upper camel case affected property name or a short name to identify that property easily.

.adf-Border {
    border: 1px solid #003C5A;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.adf-Background {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #0A82BE;
}
.adf-Teal {
    background-color: #37A5AF;
}
.adf-Ice {
    background-color: #AAD2E6;
}
.adf-Round {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

Example:

Adform Design

<div class="adf-Border adf-Background">
    <span>.adf-Background</span>
</div>

<div class="adf-Border adf-Background adf-Teal">
    <span>.adf-Teal</span>
</div>

<div class="adf-Border adf-Background adf-Ice">
    <span>.adf-Ice</span>
</div>

<div class="adf-Border adf-Background adf-Round">
    <span>.adf-Round</span>
</div>