Q4 Online Reports - Documentation

Overview

The Q4 OR uses Q4’s CMS functionality to create a report quickly and efficiently. Development of an OR will be split up between a developer and content creators.

Development Tasks:

Adjust Global Variables
Minor JS configuration (if needed)
SVG and Icon additions (if needed)

Content Tasks:

Export images from client provided content
Creation of stories / modules
Client stylesheet configuration as necessary

Stories are generated through a press release widget, with each type using the CMS in its own way. The only default module used in the template is the Hero Banner. Additional modules can be created in the CMS as you would with our regular sites.

Getting Started

Important Files - Where to begin.

Global variables are configured with SASS and compass. This is the only file that should be configured by the development team. The global variables can be found within the following location:

Global Variables:

project/sass/includes/variables.scss

Any client-specific styling should be added to the client stylesheet. This can be found here:

Client SASS File:

project/sass/client.scss

Alternatively, client styling can be added to the client stylesheet in the CMS.

Standard Image Sizes

The OR project is a template-based product, which means that we also have a template for what we look for in images. Here are the standard dimensions you will need for each type of image.

Hero Image:

Recomended size: 1920px x 1080px

Feature Image / Details Banner Image:

Recomended size: 1600px x 815px

Single Story Image:

Recomended size: 600px x 600px

Best size for desktop: 640px x 640px

Multi Story Image:

Recomended size: 480px x 480px

If Multi Story uses 1/3 of width for items, a larger size is recommended.

Download Image:

Recomended size: 350px x 475px

Image Compression - Saving for the Web

Compressing images with Photoshop is a great way to increase site speed. Here is a quick guide to saving images for the web:

Resource: Adobe Photoshop and uncompressed Image (1,337kb).

Legacy Settings: Save for Web and Devices

To save an image for web and devices (legacy), the keyboard shortcut is Alt+Shift+Ctrl+S. Follow the legacy settings in the resouces note to compress an image.

Note: The newest versions of Photoshop (Creative Cloud) allow an even better compressor, keyboard shortcut Alt+Shift+Ctrl+W. This one is more basic, but yields even better results. Save as jpg format with 70% quality.

I've managed to compress this image down to 231kb, which is the size you want to aim for with all your banner images. Here is the image

Components

Toast

Chosen for its incredibly light size, toast is the primary component for grid foundation on the OR template. Usage is very basic, outlined below:

Toast Resource and Documetation

.col is the base class that determines a grid object.

.col-#-of-# is used to determine screen width of the object for global screen size.

.col-$-#-of-# is used to determine screen width of the object for a screen-breakpoint, where $ is the screen breakpoint. Screen breakpoints can be configured in the global variables.

Default screen breakpoints:

Large – 1200px – col-lg-#-of-#
Legacy – 1024px – col-lc-#-of-#
Medium – 768px – col-md-#-of-#
Small – 480px – col-sm-#-of-#

Example: Single Story Item


<div id="make-the-most" class="story-item single  alt animate">
	<!-- By default, the image of this story item takes up 5/12 screen width -->
	<div class="col col-5-of-12 story-image fade-from-left">
	</div>
	<!--By default, the content of this story item takes up 7/12 of the screen width, but then takes up 100% of the screen width if the screen is smaller than the medium and small breakpoints. -->
	<div class="col col-7-of-12 col-md-1-of-1 col-sm-1-of-1 story-content">
	</div>
</div>

Toast can also be used to set the size of story items. This feature is implemented during the tag phase of creating a story item. Individual story (press release) tags are converted to class names, including toast classes. More in-depth explanation can be found in the Stories section.

Example: Feature items that take half the screen:


<!--Classes added this story using the Press Release Tags input. They include toast classes.-->
<div id="features" class="story-item feature feature-half  center dark corporate-two col col-1-of-2 col-md-1-of-1 animate">
	<div class="fixed-bg">
		<div class="container">
			<div class="story-body fade-from-left"></div>
			<a href="/Details/2015/features/default.aspx" class="details arrow fade-in"></a>
		</div>
	</div>
</div>

<!--Classes added this story using the Press Release Tags input. They include toast classes.-->
<div id="benefits" class="story-item feature feature-half center dark col col-1-of-2 col-md-1-of-1 animate">
	<div class="fixed-bg lazy-loaded">
		<div class="container">
			<div class="story-body fade-from-right"></div>
			<a href="/Details/2015/benefits/default.aspx" class="details arrow fade-in"></a>
		</div>
	</div>
</div>

Slick

Sliders within the online reports are created through the .story-slider class. The sliders are built using Slick.js, a highly customizable slider plugin.

Slick Resource and Documentation

Example: Feature Item Slider


<div id="welcome" class="story-item feature  center dark animate">
	<div class="container">
		<h2 class="fade-from-top">Welcome to Online Reports</h2>
		<div class="story-body fade-from-bottom">
			<div class="landing-content">
				<div class="story-slider">
					<div>
						<p>Easily convert any report (annual, quarterly, sustainability, proxy, etc.) into a responsive mini-site</p>
					</div>
					<div>
						<p>Add infographics, videos and charts to better tell your story</p>
					</div>
					<div>
						<p>Include key content and design features from your report with additional customizable modules and features</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

By default, active slick pager dots use the $corporate-two colour. This can be overwritten using client styling.

Slick options can be passed within the stories widget.


<script>
	$('.story-container').stories({
		slickOpts: {
			dots: true,
			infinite: true,
			arrows: false,
			pauseOnHover: false,
			autoplay: true,
			autoplaySpeed: 5000
		}
	});
</script>

Q4 Default Icons

Q4 Online Reports use the “Q4 Online Report” icon set, which can be found in the icomoon app.

Icomoon Resource and Documentation

Feel free to add an icon that we do not have in our icon set through the icomoon app.

Application is basic, similar to many other icon sets like font-awesome. Classes are applied to <i> tags to generate icons.

Example: HTML Icon using class name


<html>
	<i class="q4-line-reports"></i>
</html>

<!--icomoon default styling-->
<style>
	i {
	    /* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'Q4-Default-Icons' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.q4-line-reports:before {
		content: "\e900";
	}
</style>

Alternatively, calling the font-family and content properties in CSS produce the same result.

Example: Client Logo


<html>
	<div class="header-assets">
		<div class="nav-toggle">
			<i class="q4-icon-menu"></i>
		</div>
		<div class="nav-logo scroll-top"></div>
	</div>
</html>

<style>
	/*Logo Overwrite from image to icon*/
	.nav-logo {
		background: none;
	}
	.nav-logo:before {
		font-family: 'Q4-Default-Icons';
		content: "\e903";
		font-size: 60px;
		line-height: 45px;
	}
</style>

Global Variables

Global variables affect the entire site, and will greatly affect the template's appearance. Variables include default image locations, font families, and corporate colours.

The file to adjust these variables can be found in the pre-compiled SCSS folder (/sass/includes/variables.scss)

Site Setup

Example: Site Configuration Global Variables


//------------------------------------------------------//
//------------------Site Configuration------------------//
//------------------------------------------------------//

$site: "http://blankor.q4web.com/" !default;
//$site: "http://yoursite.q4web.com/" !default;



//------------------------------------------------------//
//------------Screen Breakpoint Configuration-----------//
//------------------------------------------------------//

//Large Screen Size:
$screen-large: 1200px !default;

//Legacy Screen Size:
$screen-legacy: 1024px !default;

//Tablet Screen Size:
$screen-medium: 768px !default;

//Phone Screen Size:
$screen-small: 480px !default;

The $site variable uses the q4web domain to link images in the various stylesheets.

Images

Global images should not be adjused, but the option is available.

Example: Assigning Global Images


//------------------------------------------------------//
//------------------Image Configuration-----------------//
//------------------------------------------------------//

//Client logo
$client-logo: url($site+'files/design/nav-logo.png') !default;

//Default Hero Banner Image
$hero-default: url($site+'files/design/hero/hero-desktop.jpg') !default;

//Default Details Banner Image
$details-default: url($site+'files/design/banner/details-default.jpg') !default;

//Default Overlay Background Image:
$overlay-background: url($site+'files/temp/overlay-bg.png') !default;

When implementing a new project, the simplest process is to overwrite the default images within the file explorer.

Large images should be properly compressed.

Fonts and Font Colours

Example: Assigning Global Fonts


//------------------------------------------------------//
//------------------Font Configuration------------------//
//------------------------------------------------------//

//Font Families:
$header-font: 'Open Sans', sans-serif !default;
$body-font: 'Roboto', sans-serif !default;
$icon-font: 'Q4-Default-Icons' !default;

//Default Body Text:
$body-color: #949494 !default;
$body-size: 14px !default;
$body-line-height: 22px !default;

//Default Link Text:
$link-color: #3498db !default;

//Default Link Text on hover:
$link-hover-color: #ec6a4c !default;
$link-hover-decoration: none !default;

//Hero Image Heading Text:
$hero-title-size: 50px !default;
$hero-title-color: #fff !default;

//Hero Image Sub-Heading Text:
$hero-subtitle-size: 20px !default;
$hero-subtitle-color: #fff !default;

//Story Title Text:
$story-title-size: 36px !default;
$story-title-color: #3498db !default;

//Story Arrow Text:
$story-arrow-color: #ec6a4c !default;

//

//Default Table Heading Text:
$data-header-color: #000 !default;
$data-header-size: 18px !default;

//Default Table Current Year Text:
$data-current-color: #3498db !default;

//All Text Colour within a .dark Container
$dark-bg-text-color: #fff !default;

//All Text Colour within a .light Container
$light-bg-text-color: #000 !default;

//Brand Colour:
$brand-text-color: #3498db !default;

Any custom font added to the configuration will need to be added to the Site Link Tags.

Container Colours

Example: Assigning Global Container Colours


//------------------------------------------------------//
//------------Container Colour Configuration------------//
//------------------------------------------------------//

//Default Body Background Colour:
$body-bg: #fff;

//Primary Brand Colour:
$brand-bg: #3498db !default;

//Alternate Brand Colour:
$brand-bg-alt: #ec6a4c !default;

//Light BG Colour:
$light-bg: #f5f5f5 !default;

//Dark BG Colour:
$dark-bg: #22272b !default;

//Grey BG Colour:
$grey-bg: #727272 !default;

//Default Table Header Background Colour:
$table-head-bg: transparent !default;

//Default Border Colors
$border-dark-color: rgba(0,0,0,0.2) !default;
$border-light-color: rgba(255,255,255,0.2) !default;

These values are assigned to classes, which can be used throughout the OR.

Example: Using Global Container Colours


.dark {
	color: $dark-bg-text-color;
	a, h2, .arrow {
		color: $dark-bg-text-color;
	}
}

.light {
	color: $light-bg-text-color;
}

.brand-bg {
	background-color: $brand-bg;
}

.brand-bg-alt {
	background-color: $brand-bg-alt;
}

.light-bg {
	background-color: $light-bg;
}

.dark-bg {
	background-color: $dark-bg;
}

.grey-bg {
	background-color: $grey-bg;
}

.brand-color {
	color: $brand-text-color;
}

.header-font {
	font-family: $header-font;
}

Global Classes

Applied throughout the entire OR, these classes can be used on any container, story item, or module (custom HTML, too!). Global classes are commonly applied to the various stories via tags, as described below.

.container

A basic container class to assign uniform vertical spacing between story items or custom containers.


.container {
	padding: 6% 0;

	@media screen and (max-width: $screen-medium) {
		padding: 10% 0;
	}

	@media screen and (max-width: $screen-small) {
		padding: 20% 0;
	}
}
.container:after, {
	content: "";
	display: table;
	clear: both;
}

Feature and Multi stories have one of these containers built into the template.

The .container class can be modified greatly based on the parent container classes (.center, .thick, .thin, .full).

Includes clearfix properties.

.center

Used to center text within the container. Also used to augment the .container class with a legacy width and centered position.


.center {
	text-align: center;

	.container {
		margin-left: auto;
		margin-right: auto;
		max-width: 960px;
		padding-left: 5%;
		padding-right: 5%;
	}

}

A very common class in the OR. A must for the feature story items.

.thin or .thick or .full

Used to augment the .container class for better responsive appearance.


@media screen and (min-width: $screen-small+1) {
	.thin .container {
		padding: 4% 0;
	}

	.thick .container {
		padding: 12% 0;
	}
}

@media screen and (min-width: $screen-medium+1) {
	.full .container {
		padding-left: 0%;
		padding-right: 0%;
		max-width: 1200px;
	}
}

The most common use for the .full class is a data or infographic story / module.

.light and .dark

Used to appropriate the colour of text and details arrows for the background.


.dark {
	color: $dark-bg-text-color;
	a, h2, .arrow {
		color: $dark-bg-text-color;
	}
}

.light {
	color: $light-bg-text-color;
}

Specific colour values can be adjusted in the Global Variables.

.overlay-background

Used to add a corporate-colored overlay image or texture to the container.


.overlay-background {
	background-image: $overlay-backgorund;
	background-repeat: repeat;
}

Image location can be configured in the Global Variables.

.fixed-bg

Beautifies the container's background-image to be a lightweight "parallax".


.fixed-bg {
	height: 100%;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	@media screen and (max-device-width: 480px) {
		background-attachment: scroll;
	}
}

The max-device-width: 480px media query applies to mobile devices.

Feature and feature-half stories have this class applied by default.

This styling does not work well in IE8, but the effect can be ignored as part of our "graceful degradation" program.

Background Colours

Used to apply corporate-themed background colours.



.PageDefaultInner {
	overflow: hidden;
	background-color: $body-bg;
}
.brand-bg {
	background-color: $brand-bg;
}

.brand-bg-alt {
	background-color: $brand-bg-alt;
}

.light-bg {
	background-color: $light-bg;
}

.dark-bg {
	background-color: $dark-bg;
}

.grey-bg {
	background-color: $grey-bg;
}

Corporate colours can be adjusted in the Global Variables.

Hero Banner

Overview


<div class="hero-container fixed-bg">
	<div class="hero-overlay">
		<h1>Online<br>Reports</h1>
		<h4>An Interactive Experience</h4>
	</div>
	<a class="scroll-button bounce"><i class="q4-chevron-small-down"></i></a>
</div>

Section Source: HTML Module

.hero-container uses a default image path, which can be configured in the global variables.

The scroll-button class is mapped to the scrolling function in main.js.

Scrolling past the hero banner adds a .past-hero class to the .main-container element.

Header Assets

Overview


<div class="header-assets">
	<div class="nav-toggle">
		<i class="q4-icon-menu"></i>
	</div>
	<div class="nav-logo scroll-top"></div>
</div>

Section Source: Layout Definition

By default, .nav-logo uses the background-image property to configure the client logo. This can be changed to use an SVG for better performance and mobile compatibility. More information here.

The navigation toggle icon is coloured by the $brand-bg global variable.

Scrolling past the hero banner adds a background-color to the container, adjusted by the $header-assets-bg global variable.

The scroll-top class is used as a way to scroll back to the top of the page. Configured in main.js.

Clicking the .nav-toggle element adds the .toggle-nav-open class to the body element.

Navigation

Overview


<div class="nav-container">
	<i class="close q4-block-exit"></i>
	<!--Navigation Module-->
	<asp:PlaceHolder ID="NavigationPane" Runat="server" />
</div>

Section Source: Layout Definition

The main navigation is generated using page admin, with the root starting at the second level.

Items are styled to appear from the .level-2 list only.

Menu uses a CSS3 animation to slide, which is triggered by the .toggle-nav-open class on the <body> element.

Menu becomes available when the .nav-toggle element is clicked.

Social Media links

Social links are located in the navigation pane. By default, there are four links: Twitter, Linkedin, Google+, and Facebook.


<div class="quick-links" runat="server" id="divModuleContainer">
	<h2 id="lblTitle" runat="server"><asp:Label Runat="server" ID="lblModuleTitle" /></h2>
	<ul class="quick-links" id="qlList" runat="server">
		<asp:Repeater Runat="server" ID="QuickLinkList">
			<ItemTemplate>
				<asp:Literal Runat="server" ID="litSeparator" />
				<asp:Literal Runat="server" ID="litQuickLink" />
				<asp:Literal Runat="server" ID="litQuickLinkText" />
			</ItemTemplate>
		</asp:Repeater>
	</ul>
</div>

Section Source: Quick Links Module

Each of the social links can be configured using the Quick Link Edit in the CMS.

Social links use icons.

Depending on the client, some of these links will be unavailable. Searching the corporate site is a good way to idenfity what social sharing the client uses.

Stories

Overview

Stories are the bread and butter of the OR. Using press releases as a source and tags to modify the templates, story items come in a variety of forms with infinite customization.

Example: Launching a story widget


<script>
	$('.story-container').stories();
</script>

Section Source: Embed Module

Stories are built using the javascript within content.js.

Tags within the press release edit are used to deffirenciate the type of story, as well as to custmomize it.

Each story comes with a unique ID, allowing easy client-side CSS overrides.

Landing / Details Content

Story content is managed by the body of the press release item. This includes both the content that appears on the landing page, as well as the details page. The details page has a default banner image, which can be configured in the Global Variables. This image can be overwritten by the wrapping container, shown below.

Example: Adding content to the landing page and the details page within one story


<!--container used to customize the details page banner image. Must be included. See Details Banner Cofiguration for more information-->
<div class="story-container" data-image="/files/design/banner/banner-1-desktop.jpg">
	<!--content wrapped in this div will populate on the landing page-->
	<div class="landing-content">
		<p>Your company's corporate reports are the perfect assets to show the progress that's been made over the year as well as communicate the company's trajectory for the future. Enhance your report to provide an engaging, dynamic experience for your investors.</p>
	</div>
	<!--content wrapped in this div will populate on the details page-->
	<!-- details-content-start -->
	<div class="details-content">
		<p>Q4 Online Reports allow you to optimize any of your corporate reports with responsive design, animations, charts and video. Online Reports are the perfect way to go beyond the numbers and communicate your corporate success and vision.</p>
		<p>With Q4 Online Reports, your reports become customized mini-sites that use key assets from your company's static reports to provide your investors with an optimized online experience.</p>
		<p>Through our Q4 Simplementation process, we require minimal client guidance to turn any report type (Annual, Quarterly, Proxy, Sustainability, Responsibility etc.) into a dynamic, interactive web experience.</p>
	</div>
	<!-- details-content-end -->
	<!--content wrapped in this div will populate on top of the image (single story only)-->
	<div class="image-content">
		<h5>Ionut Panait</h5>
		<h6>The Mole King</h6>
	</div>
</div>

Source: Press Release Edit -> Body

Landing Page Content: content within the .landing-content div.

Details Page Content: content within the .details-content div. A comment tag is added before and after the details content. This ensures that the details content is ignored on the landing page (decreasing load time). See exaples on blankor.

Single Story Image Content: content within the .image-content div.

Details Page Banner: configured by the data-image attribute within the .story-container div.

Details Banner Configuration

In addition to the details content of a story, details pages include a responsive banner.

Example: Configuring a details banner


<!--Example of a fully configured details banner-->
<div class="story-container" data-image="/files/design/banners/shareholder-bg-desktop.png" data-overlay="q4-search-plus" data-text="Full Graph" data-position="center">
	<--Story Content-->
</div>

<!--Example of a hidden details page banner-->
<div class="story-container" data-noheader="true">
	<--Story Content-->
</div>

Example: Details Banner HTML


<div class="header-image" style="background-image: url("/preview/files/design/banner/banner-3-desktop.jpg"); background-position: 50% 50%;">
	<div class="header-overlay">
		<a href="/preview/files/design/banner/banner-3-desktop.jpg" target="_blank">
			<i class="q4-search-plus"></i>
			Additional text added by the data-text property within the .story-container div
		</a>
	</div>
</div>

.header-image: container for the details banner.

.header-overlay: additional details for the banner, wrapped in a link to the banner image source. This is usefull for adding a link to a "full map".

data-noheader: boolean; determines if details page has a banner image.

data-image: configures image for the banner. Uses default if not included. Default is configured in the Global Variables.

data-overlay: adds an icon to the details banner.

data-text: Additional text placed below the icon.

data-position: determines the banner image background-position property in the css.

Types

Feature Story

Includes a title, space for content, a link to a details page, and a lightweight parallax image background. Feature stories are build for content, being the go-to item for tables, infographics, but also work as a beautiful title.

Example: Feature Story Anatomy


<div id="{{SeoName}}" class="story-item feature {{cls}}"> +
	<div class="in-viewport"></div> +
	<div{{#ThumbnailPath}} data-bg="{{{ThumbnailPath}}}"{{/ThumbnailPath}} class="fixed-bg"> +
	    {{#overlay}}<div class="overlay-background">{{/overlay}} +
	        <div class="container"> +
	            {{#Headline}}<h2 class="fade-from-top">{{Headline}}</h2>{{/Headline}} +
	            {{#Body}}<div class="story-body fade-from-bottom">{{{Body}}}</div>{{/Body}} +
	            {{#LinkToDetailPage}}<a href="{{LinkToDetailPage}}" class="details arrow fade-in"></a>{{/LinkToDetailPage}} +
	        </div> +
	    {{#overlay}}</div>{{/overlay}} +
	</div> +
</div>

Tag needed: feature

ID: Generated by the Press Release Item URL

Classes: Generated by the Press Release Item Tags

Title: Generated by the Press Release Item Headline

Body: Generated by the Press Release Item body (wrapped in .landing-content div)

Details Page Link: Automatically generated by the Press Release Item URL OR URL Override

Background-Image: Generated by the Press Release Item Thumbnail

The ID of the story needs to match up with the Page Admin entry in order for the navigation to function.

Setting the URL Override to just a hash (#) will remove the details page link.

The overlay-background container is present if the press release is tagged with "overlay-background"

The thumbnail is not necessary for the story item.

The .in-viewport div is used to track animation. Configured in main.js.

Feature-Half Story

Includes a title, space for content, a link to a details page, and a lightweight parallax image background. Feature-Half stories are Feature stories that take up half of the screen space.

Example: Feature-Half Story Anatomy


<div id="{{SeoName}}" class="story-item feature feature-half {{cls}}"> +
	<div class="in-viewport"></div> +
	<div{{#ThumbnailPath}} data-bg="{{{ThumbnailPath}}}"{{/ThumbnailPath}} class="fixed-bg"> +
		{{#overlay}}<div class="overlay-background">{{/overlay}} +
			<div class="container"> +
				{{#Headline}}<h2 class="{{animationCls}}">{{Headline}}</h2>{{/Headline}} +
				{{#Body}}<div class="story-body {{animationCls}}">{{{Body}}}</div>{{/Body}} +
				{{#LinkToDetailPage}}<a href="{{LinkToDetailPage}}" class="details arrow fade-in"></a>{{/LinkToDetailPage}} +
			</div> +
		{{#overlay}}</div>{{/overlay}} +
	</div> +
</div>

Tag needed: feature-half

ID: Generated by the Press Release Item URL

Classes: Generated by the Press Release Item Tags

Title: Generated by the Press Release Item Headline

Body: Generated by the Press Release Item body (wrapped in .landing-content div)

Details Page Link: Automatically generated by the Press Release Item URL OR URL Override

Background-Image: Generated by the Press Release Item Thumbnail

The ID of the story needs to match up with the Page Admin entry in order for the navigation to function.

Setting the URL Override to just a hash (#) will remove the details page link.

The overlay-background container is present if the press release is tagged with "overlay-background"

The thumbnail is not necessary for the story item.

The .in-viewport div is used to track animation. Configured in main.js.

Single Story

A story that's split into two sections, the image and content. Single stories are a great way to tease a details page. The most common single story would be the Letter from the CEO.

Example: Single Story Anatomy


<div id="{{SeoName}}" class="story-item single {{cls}}"> +
	<div class="in-viewport"></div> +
	<div class="col col-1-of-3 story-image fade-from-left"> +
		<img data-src="{{ThumbnailPath}}" alt="{{Headline}}"> +
		'{{#imgContent}}{{{imgContent}}}{{/imgContent}}' +
	</div> +
	<div class="col col-2-of-3 col-md-1-of-1 col-sm-1-of-1 story-content"> +
		<div class="story-inner"> +
			{{#Headline}}<h2 class="fade-from-top">{{Headline}}</h2>{{/Headline}} +
			{{#Body}}<div class="story-body fade-from-bottom">{{{Body}}}</div>{{/Body}} +
			{{#LinkToDetailPage}}<a href="{{LinkToDetailPage}}" class="details arrow fade-in"></a>{{/LinkToDetailPage}} +
		</div> +
	</div> +
</div>

Tag needed: single

ID: Generated by the Press Release Item URL

Classes: Generated by the Press Release Item Tags

Title: Generated by the Press Release Item Headline

Body: Generated by the Press Release Item body (wrapped in .landing-content div)

Details Page Link: Automatically generated by the Press Release Item URL OR URL Override

Story Image: Generated by the Press Release Item Thumbnail

Story Image Content: Generated by the Press Release Item body (wrapped in .image-content div)

Single stories automatically alternate with the image being displayed on the left side first, then right, then left, and so on.

The ID of the story needs to match up with the Page Admin entry in order for the navigation to function.

Setting the URL Override to just a hash (#) will remove the details page link.

The .in-viewport div is used to track animation. Configured in main.js.

Multi Story

A story item that is to be built as part of a set of stories, usually four or eight. Based on the "split" tag, the multi story can take on two forms, described below.

Example: Multi Story Anatomy


<div id="{{SeoName}}" class="story-item multi col {{cls}}"> +
	<div class="in-viewport"></div> +
	<div class="col story-image"> +
		<a href=""><img data-src="{{ThumbnailPath}}" alt="{{Headline}}"></a> +
	</div> +
	<div class="col story-content"> +
		{{#Headline}}<h2 class="{{animationCls}}">{{Headline}}</h2>{{/Headline}} +
		<div class="story-body fade-from-bottom">{{{Body}}}</div> +
		{{#LinkToDetailPage}}<a href="{{LinkToDetailPage}}" class="details arrow fade-in"></a>{{/LinkToDetailPage}} +
	</div> +
</div>

Tag needed: multi

Optional Tag: split AND alphabetically spelled number (first through fourth)

ID: Generated by the Press Release Item URL

Classes: Generated by the Press Release Item Tags

Story Image: Generated by the Press Release Item Thumbnail

Title: Generated by the Press Release Item Headline

Body: Generated by the Press Release Item body (wrapped in .landing-content div)

Details Page Link: Automatically generated by the Press Release Item URL OR URL Override

The "split" tag forces the story to devide into two sections: image and content. Each section takes half of the story width.

Multi stories without the "split" tag will have the content positioned absolutely on top of the image.

Example: Multi Story with split tag

Image

Content

Image

Content

Image

Content

Image

Content

Example: Multi Story without split tag

Image

Content

Image

Content

Image

Content

Image

Content

Split multi story items should be tagged with a number in alphabetical spelling. This ensures that they are displayed correctly in responsive view. For example:

the first multi story in a set will have the "first" tag
the second story will have the "second" tag
the third story will have the "third" tag
the fourth story will have the "fourth" tag
the fifth story will have the "first" tag
the sixth story will have the "second" tag
and so on.

The ID of the story needs to match up with the Page Admin entry in order for the navigation to function.

Setting the URL Override to just a hash (#) will remove the details page link.

The .in-viewport div is used to track animation. Configured in main.js.

Download Story

A story item for document downloads, built with a thumbnail and link text. Most Online Reports come with two of these stories as a closing statement.

Example: Download Story Anatomy


<div id="{{SeoName}}" class="story-item download {{cls}}"> +
	<div class="in-viewport"></div> +
	<div class="container"> +
		<div class="story-body {{animationCls}}"> +
			<a href="{{LinkToDetailPage}}" target="_blank" class="download-item"> +
				{{#ThumbnailPath}}<img data-src="{{ThumbnailPath}}" alt="{{Headline}}">{{/ThumbnailPath}} +
				{{#Headline}}<span class="download-text">{{Headline}}</span>{{/Headline}} +
			</a> +
		</div> +
	</div> +
</div>

Tag needed: download

ID: Generated by the Press Release Item URL

Classes: Generated by the Press Release Item Tags

Document Thumbnail: Generated by the Press Release Item Thumbnail

Download Text: Generated by the Press Release Item Headline

Download Link: Should be generated by the Press Release Item URL Override

The ID of the story needs to match up with the Page Admin entry in order for the navigation to function.

The thumbnail is not necessary for the story item.

The .in-viewport div is used to track animation. Configured in main.js.

Additional Tags

Here is a list of story-specific tags. Keep in mind that any Global Classes can also be applied as tags to the story items.

no-title

Used to remove the headline title from a story-item.

Converting a feature story item into simple eye candy is easy. Include the "no-title" tag, a "#" URL override, and an empty body when creating a feature story item.

overlay-background

Used to add an image overlay to a story-item, which can be configured in the Global Variables.

This tag has the same purpose as the overlay-background CSS class.

no-display

Used to hide the story from the landing page by disabling render. The details page remains.

This tag is very useful for generating additonal details pages without having them show up as a story on the landing page..

external-link

Sets the story's details page link target attribute to "_blank". Both the story-arrow and thumbnail link (if available) will be affected.

A useful tag for creating stories that link out to external pages.

split

Used to split the image and content of a multi-story item.

More information can be found in the multi-story type documentation.

Customization

Similar to our other widgets, options can be passed within the embed module.

Example: Applying options to the stories-widget


<script>
	$('.story-container').stories({
		templates: {
			single: (
				//My own template for the single story
			)
		},
		slickOpts: {
			dots: false,
			arrows: false,
			autoplaySpeed: 10000
		},
		tolerance: '-150',
		headerOffset: 0,
		showHeader: true,
		year: 2015,
		downloads: 'even'

	});
</script>

The templates options allow creating a custom template for each story type.

The slickOpts options allow customization of the Slick sliders in the widget.

The tolerance option customizes how close the user has to scroll to a story item before it animates in. Default value is -250 (in pixels).

The headerOffset option determines how close the window will scroll to its destination when a user clicks on a navigation item. Supports both a fixed number and a css selector. Default value is the height of the .header-assets.

The showHeader option is a boolean that determines the appearance of the banner for all details pages.

The year option sets what year the widget pulls story items from. This option allows us to use the same CMS for multiple online reports.

The downloads option determines the template used for the download story, with even being suitable for two or four download items, and odd for three or six download items.

Financial Tables and Infographics

Infographics and Financial Highlights

HTML content that uses the countTo library to create scrolling infographics. A default template can be found on the BlankOR site, available to be customized.

Example: Animated Financial Highlights Template


<div class="landing-content">
	<div class="data-container count-to">
		<ul class="data-tabs-nav">
			<li class="selected">li.selected</li>
			<li>li</li>
		</ul>

		<ul class="data-content" value="2014" style="display: block;">
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">data-title</span>
				<span class="data-value">$<span class="timer" data-decimal="2" data-from="0" data-to="9.99">9.99</span></span>
				<span class="data-label">data-label</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2 data-border">
				<span class="data-title">data-title</span>
				<span class="data-value"><span class="timer" data-decimal="1" data-from="0" data-to="9.0">9.9</span></span>
				<span class="data-label">data-label</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">data-title</span>
				<span class="data-value">$<span class="timer" data-from="0" data-to="999">999</span></span>
				<span class="data-label">data-label</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">data-title</span>
				<span class="data-value brand-color"><span class="timer" data-decimal="1" data-from="0" data-to="99.9">99.9</span></span>
				<span class="data-label">data-label</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2 data-border">
				<span class="data-title">data-title</span>
				<span class="data-value brand-color">$<span class="timer" data-decimal="2" data-from="0" data-to="99.99">99.99</span></span>
				<span class="data-label">data-label</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">data-title</span>
				<span class="data-value brand-color"><span class="timer" data-decimal="1" data-from="0" data-to="99.9">99.9</span></span>
				<span class="data-label">data-label</span>
			</li>
			<p class="data-note">Paragraph tag with <strong>.data-note</strong> class. I have a lot of information, so I've been given the <strong>full</strong> tag.</p>
		</ul>
		<ul class="data-content" value="2013">
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">Funds from Operationss*</span>
				<span class="data-value">$<span class="timer" data-decimal="2" data-from="0" data-to="3.65">3.65</span></span>
				<span class="data-label">PER SHARE</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2 data-border">
				<span class="data-title">Net Operating<br>Income Growth*</span>
				<span class="data-value"><span class="timer" data-decimal="1" data-from="0" data-to="3.5">3.5</span></span>
				<span class="data-label">PERCENT</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">Mall Tenant Sales</span>
				<span class="data-value">$<span class="timer" data-from="0" data-to="819">819</span></span>
				<span class="data-label">PER SQUARE FOOT</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">Ending Occupancy<br>Comparable Centers</span>
				<span class="data-value brand-color"><span class="timer" data-decimal="1" data-from="0" data-to="96.3">96.3</span></span>
				<span class="data-label">PERCENT</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2 data-border">
				<span class="data-title">Average Rent</span>
				<span class="data-value brand-color">$<span class="timer" data-decimal="2" data-from="0" data-to="57.33">57.33</span></span>
				<span class="data-label">PER SQUARE FOOT</span>
			</li>
			<li class="col col-1-of-3 col-sm-1-of-2">
				<span class="data-title">Releasing Spreads</span>
				<span class="data-value brand-color"><span class="timer" data-decimal="1" data-from="0" data-to="18.2">18.2</span></span>
				<span class="data-label">PERCENT</span>
			</li>
			<p class="data-note">*See the company's most recent filing on Form 10-K for reconciliations of net income to funds from datas and net operating income.</p>
		</ul>
	</div>
</div>

.data-container: wrapping container for financial infographics.

.count-to: required class for countTo functionality

.data-tabs-nav: unordered list used for navigation between sections within .data-content.

.data-content: unordered list of infographic items. List items should be assigned toast classes.

.timer: required class for animated figures. The three required properties for animations are data-decimal, data-from, and data-top.

.data-note: class used to create a small footnote.

Source: .landing-content or .details-content container of Story Item body.

Best used in a Feature Story. Story should also be tagged with the full tag for more horizontal space.

Template is responsive, but will require a few tweaks based on font-family.

Financial Tables

Another option to display financial information is tables. Both desktop and mobile versions of content needs to be created to allow for smooth responsive view. Table appearance is greatly determined by Global Variables.

Example: A Single Year Financial Highlights Table


<div class="data-table-container">

	<!--Desktop Table-->
	<table class="data-desktop">
		<tbody>
			<tr>
				<th></th>
				<th class="data current">2015</th>
				<th class="data">2014</th>
			</tr>
			<tr>
				<td>Revenue</td>
				<td class="data current">$1,835</td>
				<td class="data">$1,843</td>
			</tr>
			<tr>
				<td>Average reatdzed gold price</td>
				<td class="data current">$1,256/oz</td>
				<td class="data">$1,408/oz</td>
			</tr>
			<tr>
				<td>Operating Earnings</td>
				<td class="data current">$286</td>
				<td class="data">$541</td>
			</tr>
			<tr>
				<td>Adjusted cash flow from operations before changes in non-cash working capital</td>
				<td class="data current">$648</td>
				<td class="data">$708</td>
			</tr>
			<tr>
				<td>Cash and Available Credit</td>
				<td class="data current">$781</td>
				<td class="data">$830</td>
			</tr>
		</tbody>
	</table>

	<!--Mobile Table-->
	<div class="data-mobile">

		<div class="data-mobile-header">
			<table>
				<tbody><tr>
					<th>2015</th>
					<th class="data-toggle"><i class=""></i></th>
				</tr>
			</tbody></table>
		</div>
		<div class="data-mobile-content">
			<table>
				<tbody>
					<tr>
						<td>Revenue</td>
						<td class="data">$1,835</td>
					</tr>
					<tr>
						<td>Average reatdzed gold price</td>
						<td class="data">$1,256/oz</td>
					</tr>
					<tr>
						<td>Operating Earnings</td>
						<td class="data">$286</td>
					</tr>
					<tr>
						<td>Adjusted cash flow from operations before changes in non-cash working capital</td>
						<td class="data">$648</td>
					</tr>
					<tr>
						<td>Cash and Available Credit</td>
						<td class="data">$781</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

</div>

.data-dekstop table header: uses the $table-head-bg, data-header-color, and $data-header-size variables to customize the background colour, text colour, and text size of the header respectively.

.data-mobile table header: uses the $data-current-color and data-header-size to colour and size the text appropraitely.

.current: uses the $data-current-color variable as the text colour.

Source: .landing-content or .details-content container of Story Item body.

Mobile table uses an accordion functionality, where .data-mobile-header items trigger a slide toggle for .data-mobile-content containers.

Client Override

Client CSS can be added in two ways.

Use the Client CSS stylesheet within the CMS.

Use the precompiled client SCSS stylesheet during implementation.

Backlog

Certain features and optimizations are yet to be completed. Use the following project page to view the backlog.

Resource: OR Project board on Jira.

OnlineReports

Online Documentationand User Guide

Q4 OR Documentation

Overview

Getting Started

Important Files - Where to begin.

Standard Image Sizes

Image Compression - Saving for the Web

Components

Toast

Slick

Q4 Default Icons

Global Variables

Site Setup

Images

Fonts and Font Colours

Container Colours

Global Classes

.container

.center

.thin or .thick or .full

.light and .dark

.overlay-background

.fixed-bg

Background Colours

Hero Banner

Overview

Header Assets

Overview

Navigation

Overview

Social Media links

Stories

Overview

Landing / Details Content

Details Banner Configuration

Types

Feature Story

Feature-Half Story

Single Story

Multi Story

Download Story

Additional Tags

no-title

overlay-background

no-display

external-link

split

Customization

Financial Tables and Infographics

Infographics and Financial Highlights

Financial Tables

Client Override

Backlog

Online
Reports

Online Documentation
and User Guide