HTML Template for Product Websites

Version 2.0

Introduction

The template is a collection of HTML, CSS and Javascript files that can be easily adapted for a website or content management system. The template employs the principles of responsive design and works on both desktop and mobile computers.

Versioning

Releases follow the “major.minor.patch” numbering convention. The templates themselves always link to the most recent version of the resources.

To always use the most recent version:
//shared.bayer.com/products/api/…

To pin to a particular release:
//shared.bayer.com/products/api/10/…

Change Notes

V 2.0 2017-11-13
  • HTML/CSS/Files: Changed colored Logo
V 1.0.1 2016-01-05
  • CSS: Added Webkit prefixes to fix issues on iOS < 9
V 1.0 2015-12-23
  • Created

HTML

The template uses HTML5 which provides compacter, more expressive semantics.


Javascript

Third party libraries

The following external Javascript libraries are required. Please ensure that your own development is compatible with them, and that you apply and verify any security patches.

Important global Variables:

JS Feature

Plugins


Styles/CSS (adaptive layout)

Media Queries

Image sprites

For reason of performance the template uses the image sprites technique for all standard icons. The images can be found in the "sys" folder inside the "img" folder. The main sprite "sprite.png" is automatically replaced witch "sprite_new_retina.png" for high resolution displays to provide sharp icons.


Naming Area

In order for the naming area to work with the responsive design three different files are used: