From b3e3dccad7e548eb45788528b9684b648978c6ae Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 15 Apr 2015 14:26:42 +0200 Subject: [PATCH] Refactored the css of Timeline and Graph2d to have a `vis-` prefix everywhere. (Still a small issue in Graph2d) --- docs/timeline.html | 12 +- examples/graph2d/04_rightAxis.html | 8 +- examples/graph2d/05_bothAxis.html | 15 +- examples/graph2d/09_external_legend.html | 694 +++++++++--------- examples/graph2d/16_bothAxis_titles.html | 14 +- examples/timeline/12_custom_styling.html | 20 +- examples/timeline/15_item_class_names.html | 18 +- examples/timeline/18_range_overflow.html | 2 +- examples/timeline/25_background_areas.html | 4 +- examples/timeline/30_subgroups.html | 6 +- examples/timeline/32_grid_styling.html | 10 +- lib/DOMutil.js | 6 +- lib/timeline/Core.js | 44 +- lib/timeline/component/CurrentTime.js | 2 +- lib/timeline/component/CustomTime.js | 2 +- lib/timeline/component/DataAxis.js | 18 +- lib/timeline/component/GraphGroup.js | 12 +- lib/timeline/component/Group.js | 20 +- lib/timeline/component/ItemSet.js | 14 +- lib/timeline/component/Legend.js | 4 +- lib/timeline/component/LineGraph.js | 2 +- lib/timeline/component/TimeAxis.js | 16 +- lib/timeline/component/css/animation.css | 10 +- lib/timeline/component/css/currenttime.css | 2 +- lib/timeline/component/css/customtime.css | 2 +- lib/timeline/component/css/dataaxis.css | 152 ++-- lib/timeline/component/css/item.css | 32 +- lib/timeline/component/css/itemset.css | 12 +- lib/timeline/component/css/labelset.css | 12 +- lib/timeline/component/css/panel.css | 47 +- lib/timeline/component/css/pathStyles.css | 32 +- lib/timeline/component/css/timeaxis.css | 16 +- lib/timeline/component/css/timeline.css | 11 +- lib/timeline/component/graph2d_types/bar.js | 2 +- lib/timeline/component/graph2d_types/line.js | 8 +- lib/timeline/component/item/BackgroundItem.js | 6 +- lib/timeline/component/item/BoxItem.js | 14 +- lib/timeline/component/item/Item.js | 4 +- lib/timeline/component/item/PointItem.js | 10 +- lib/timeline/component/item/RangeItem.js | 10 +- 40 files changed, 660 insertions(+), 665 deletions(-) diff --git a/docs/timeline.html b/docs/timeline.html index 1e9c5849..e84eb2b1 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -1373,7 +1373,7 @@ To load a locale into the Timeline not supported by default, one can add a new l

For example, to change the border and background color of all items, include the following code inside the head of your html code or in a separate stylesheet.

<style>
-  .vis.timeline .item {
+  .vis-item {
     border-color: orange;
     background-color: yellow;
   }
@@ -1424,17 +1424,17 @@ To load a locale into the Timeline not supported by default, one can add a new l
 
   
<style>
   /* alternating column backgrounds */
-  .vis.timeline .timeaxis .grid.odd {
+  .vis-time-axis .grid.odd {
     background: #f5f5f5;
   }
 
   /* gray background in weekends, white text color */
-  .vis.timeline .timeaxis .grid.saturday,
-  .vis.timeline .timeaxis .grid.sunday {
+  .vis-time-axis .vis-grid.saturday,
+  .vis-time-axis .vis-grid.sunday {
     background: gray;
   }
-  .vis.timeline .timeaxis .text.saturday,
-  .vis.timeline .timeaxis .text.sunday {
+  .vis-time-axis .vis-text.saturday,
+  .vis-time-axis .vis-text.sunday {
     color: white;
   }
 </style>
diff --git a/examples/graph2d/04_rightAxis.html b/examples/graph2d/04_rightAxis.html
index b7c09a3c..f7e64a36 100644
--- a/examples/graph2d/04_rightAxis.html
+++ b/examples/graph2d/04_rightAxis.html
@@ -8,14 +8,14 @@
             font-family: sans-serif;
         }
 
-        .customStyle1 {
+        .custom-style1 {
             fill: #0df200;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #0df200;
         }
 
-        .customStyle2 {
+        .custom-style2 {
             fill: #f23303;
             fill-opacity:0;
             stroke-width:2px;
@@ -47,7 +47,7 @@
     groups.add({
         id: 0,
         content: names[0],
-        className: 'customStyle1',
+        className: 'custom-style1',
         options: {
             drawPoints: {
                 style: 'square' // square, circle
@@ -60,7 +60,7 @@
     groups.add({
         id: 1,
         content: names[1],
-        className: 'customStyle2',
+        className: 'custom-style2',
         options: {
             style:'bar',
             drawPoints: {style: 'circle',
diff --git a/examples/graph2d/05_bothAxis.html b/examples/graph2d/05_bothAxis.html
index 444a2702..526cb71c 100644
--- a/examples/graph2d/05_bothAxis.html
+++ b/examples/graph2d/05_bothAxis.html
@@ -8,27 +8,26 @@
             font-family: sans-serif;
         }
 
-        .customStyle1 {
+        .custom-style1 {
             fill: #f2ea00;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #b3ab00;
         }
 
-        .customStyle2 {
+        .custom-style2 {
             fill: #00a0f2;
-            fill-opacity:0;
             stroke-width:2px;
             stroke: #050092;
         }
 
-        .customStyle3 {
+        .custom-style3 {
             fill: #00f201;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #029200;
         }
-        path.customStyle3.fill {
+        path.custom-style3.vis-fill {
             fill-opacity:0.5 !important;
             stroke: none;
         }
@@ -57,7 +56,7 @@
     groups.add({
         id: 0,
         content: names[0],
-        className: 'customStyle1',
+        className: 'custom-style1',
         options: {
             drawPoints: {
                 style: 'square' // square, circle
@@ -70,7 +69,7 @@
     groups.add({
         id: 1,
         content: names[1],
-        className: 'customStyle2',
+        className: 'custom-style2',
         options: {
             style:'bar',
             drawPoints: {style: 'circle',
@@ -90,7 +89,7 @@
     groups.add({
         id: 3,
         content: names[3],
-        className: 'customStyle3',
+        className: 'custom-style3',
         options: {
             yAxisOrientation: 'right', // right, left
             drawPoints: {
diff --git a/examples/graph2d/09_external_legend.html b/examples/graph2d/09_external_legend.html
index c1724d93..36794c02 100644
--- a/examples/graph2d/09_external_legend.html
+++ b/examples/graph2d/09_external_legend.html
@@ -1,366 +1,366 @@
 
 
 
-    Graph2d | External legend Example
-    
-    
-
-    
-
-
+  Graph2d | External legend Example
+  
+  
+
+  
+
+  
 
 
Graph2d | External custom legend

 

-    This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
-    groups by updating the dataset.
+  This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
+  groups by updating the dataset.
 
 

 

-

+

 

 
 
 
 
diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html
index f2bd4831..2083be98 100644
--- a/examples/graph2d/16_bothAxis_titles.html
+++ b/examples/graph2d/16_bothAxis_titles.html
@@ -8,27 +8,27 @@
             font-family: sans-serif;
         }
 
-        .customStyle1 {
+        .custom-style1 {
             fill: #f2ea00;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #b3ab00;
         }
 
-        .customStyle2 {
+        .custom-style2 {
             fill: #00a0f2;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #050092;
         }
 
-        .customStyle3 {
+        .custom-style3 {
             fill: #00f201;
             fill-opacity:0;
             stroke-width:2px;
             stroke: #029200;
         }
-        path.customStyle3.fill {
+        path.custom-style3.vis-fill {
             fill-opacity:0.5 !important;
             stroke: none;
         }
@@ -88,7 +88,7 @@
     groups.add({
         id: 0,
         content: names[0],
-        className: 'customStyle1',
+        className: 'custom-style1',
         options: {
             drawPoints: {
                 style: 'square' // square, circle
@@ -101,7 +101,7 @@
     groups.add({
         id: 1,
         content: names[1],
-        className: 'customStyle2',
+        className: 'custom-style2',
         options: {
             style:'bar',
             drawPoints: {style: 'circle',
@@ -121,7 +121,7 @@
     groups.add({
         id: 3,
         content: names[3],
-        className: 'customStyle3',
+        className: 'custom-style3',
         options: {
             yAxisOrientation: 'right', // right, left
             drawPoints: {
diff --git a/examples/timeline/12_custom_styling.html b/examples/timeline/12_custom_styling.html
index 4dc4f583..5b6cdd21 100644
--- a/examples/timeline/12_custom_styling.html
+++ b/examples/timeline/12_custom_styling.html
@@ -7,14 +7,14 @@
   
 
   
diff --git a/examples/timeline/25_background_areas.html b/examples/timeline/25_background_areas.html
index 1b53ca87..ef06131e 100644
--- a/examples/timeline/25_background_areas.html
+++ b/examples/timeline/25_background_areas.html
@@ -9,10 +9,10 @@
       font-size: 11pt;
     }
 
-    .vis.timeline .item.background.negative {
+    .vis-item.vis-background.negative {
       background-color: rgba(255, 0, 0, 0.2);
     }
-    .vis.timeline .item.background.marker {
+    .vis-item.vis-background.marker {
       border-left: 2px solid green;
     }
   
diff --git a/examples/timeline/30_subgroups.html b/examples/timeline/30_subgroups.html
index 324e2883..3dda8590 100644
--- a/examples/timeline/30_subgroups.html
+++ b/examples/timeline/30_subgroups.html
@@ -9,13 +9,13 @@
             font-size: 11pt;
         }
 
-        .vis.timeline .item.background.negative {
+        .vis-item.vis-background.negative {
             background-color: rgba(255, 0, 0, 0.2);
         }
-        .vis.timeline .item.background.positive {
+        .vis-item.vis-background.positive {
             background-color: rgba(105, 255, 98, 0.20);
         }
-        .vis.timeline .item.background.marker {
+        .vis-item.vis-background.marker {
             border-left: 2px solid green;
         }
     
diff --git a/examples/timeline/32_grid_styling.html b/examples/timeline/32_grid_styling.html
index 0b6b7dbb..e63a4e60 100644
--- a/examples/timeline/32_grid_styling.html
+++ b/examples/timeline/32_grid_styling.html
@@ -12,17 +12,17 @@
     }
 
     /* alternating column backgrounds */
-    .vis.timeline .timeaxis .grid.odd {
+    .vis-time-axis .vis-grid.odd {
       background: #f5f5f5;
     }
 
     /* gray background in weekends, white text color */
-    .vis.timeline .timeaxis .grid.saturday,
-    .vis.timeline .timeaxis .grid.sunday {
+    .vis-time-axis .vis-grid.saturday,
+    .vis-time-axis .vis-grid.sunday {
       background: gray;
     }
-    .vis.timeline .timeaxis .text.saturday,
-    .vis.timeline .timeaxis .text.sunday {
+    .vis-time-axis .vis-text.saturday,
+    .vis-time-axis .vis-text.sunday {
       color: white;
     }
   
diff --git a/lib/DOMutil.js b/lib/DOMutil.js
index da476a07..81ca3471 100644
--- a/lib/DOMutil.js
+++ b/lib/DOMutil.js
@@ -150,9 +150,9 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
   }
 
   if(group.options.drawPoints.styles !== undefined) {
-    point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
+    point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
   }
-  point.setAttributeNS(null, "class", group.className + " point");
+  point.setAttributeNS(null, "class", group.className + " vis-point");
   //handle label 
   var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
   if (labelObj){
@@ -168,7 +168,7 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
       }
 
       if (labelObj.className) {
-        label.setAttributeNS(null, "class", labelObj.className  + " label");
+        label.setAttributeNS(null, "class", labelObj.className  + " vis-label");
       }
 
 
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 92c79e72..5e4085b0 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -51,24 +51,24 @@ Core.prototype._create = function (container) {
   this.dom.shadowTopRight       = document.createElement('div');
   this.dom.shadowBottomRight    = document.createElement('div');
 
-  this.dom.root.className                 = 'vis timeline root';
-  this.dom.background.className           = 'vispanel background';
-  this.dom.backgroundVertical.className   = 'vispanel background vertical';
-  this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
-  this.dom.centerContainer.className      = 'vispanel center';
-  this.dom.leftContainer.className        = 'vispanel left';
-  this.dom.rightContainer.className       = 'vispanel right';
-  this.dom.top.className                  = 'vispanel top';
-  this.dom.bottom.className               = 'vispanel bottom';
-  this.dom.left.className                 = 'content';
-  this.dom.center.className               = 'content';
-  this.dom.right.className                = 'content';
-  this.dom.shadowTop.className            = 'shadow top';
-  this.dom.shadowBottom.className         = 'shadow bottom';
-  this.dom.shadowTopLeft.className        = 'shadow top';
-  this.dom.shadowBottomLeft.className     = 'shadow bottom';
-  this.dom.shadowTopRight.className       = 'shadow top';
-  this.dom.shadowBottomRight.className    = 'shadow bottom';
+  this.dom.root.className                 = 'vis-timeline';
+  this.dom.background.className           = 'vis-panel vis-background';
+  this.dom.backgroundVertical.className   = 'vis-panel vis-background vis-vertical';
+  this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
+  this.dom.centerContainer.className      = 'vis-panel vis-center';
+  this.dom.leftContainer.className        = 'vis-panel vis-left';
+  this.dom.rightContainer.className       = 'vis-panel vis-right';
+  this.dom.top.className                  = 'vis-panel vis-top';
+  this.dom.bottom.className               = 'vis-panel vis-bottom';
+  this.dom.left.className                 = 'vis-content';
+  this.dom.center.className               = 'vis-content';
+  this.dom.right.className                = 'vis-content';
+  this.dom.shadowTop.className            = 'vis-shadow vis-top';
+  this.dom.shadowBottom.className         = 'vis-shadow vis-bottom';
+  this.dom.shadowTopLeft.className        = 'vis-shadow vis-top';
+  this.dom.shadowBottomLeft.className     = 'vis-shadow vis-bottom';
+  this.dom.shadowTopRight.className       = 'vis-shadow vis-top';
+  this.dom.shadowBottomRight.className    = 'vis-shadow vis-bottom';
 
   this.dom.root.appendChild(this.dom.background);
   this.dom.root.appendChild(this.dom.backgroundVertical);
@@ -587,12 +587,12 @@ Core.prototype._redraw = function() {
 
   // update class names
   if (options.orientation == 'top') {
-    util.addClassName(dom.root, 'top');
-    util.removeClassName(dom.root, 'bottom');
+    util.addClassName(dom.root, 'vis-top');
+    util.removeClassName(dom.root, 'vis-bottom');
   }
   else {
-    util.removeClassName(dom.root, 'top');
-    util.addClassName(dom.root, 'bottom');
+    util.removeClassName(dom.root, 'vis-top');
+    util.addClassName(dom.root, 'vis-bottom');
   }
 
   // update root width and height options
diff --git a/lib/timeline/component/CurrentTime.js b/lib/timeline/component/CurrentTime.js
index a97757a8..86fb7e7a 100644
--- a/lib/timeline/component/CurrentTime.js
+++ b/lib/timeline/component/CurrentTime.js
@@ -37,7 +37,7 @@ CurrentTime.prototype = new Component();
  */
 CurrentTime.prototype._create = function() {
   var bar = document.createElement('div');
-  bar.className = 'currenttime';
+  bar.className = 'vis-current-time';
   bar.style.position = 'absolute';
   bar.style.top = '0px';
   bar.style.height = '100%';
diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js
index aec7777b..4a331bce 100644
--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@@ -64,7 +64,7 @@ CustomTime.prototype.setOptions = function(options) {
  */
 CustomTime.prototype._create = function() {
   var bar = document.createElement('div');
-  bar.className = 'customtime';
+  bar.className = 'vis-custom-time';
   bar.style.position = 'absolute';
   bar.style.top = '0px';
   bar.style.height = '100%';
diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js
index 0af46490..6782eb1e 100644
--- a/lib/timeline/component/DataAxis.js
+++ b/lib/timeline/component/DataAxis.js
@@ -285,7 +285,7 @@ DataAxis.prototype.redraw = function () {
     var frame = this.dom.frame;
 
     // update classname
-    frame.className = 'dataaxis';
+    frame.className = 'vis-data-axis';
 
     // calculate character width and height
     this._calculateCharSize();
@@ -416,18 +416,18 @@ DataAxis.prototype._redrawLabels = function () {
     var isMajor = step.isMajor();
 
     if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
-      this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
+      this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
     }
 
     if (isMajor && this.options['showMajorLabels'] && this.master == true ||
         this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
       if (y >= 0) {
-        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
+        this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
       }
-      this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
+      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
     }
     else {
-      this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
+      this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
     }
 
     if (this.master == true && step.current == 0) {
@@ -554,7 +554,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
   // Check if the title is defined for this axes
   if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
     var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
-    title.className = 'yAxis title ' + orientation;
+    title.className = 'vis-y-axis vis-title vis-' + orientation;
     title.innerHTML = this.options.title[orientation].text;
 
     // Add style - if provided
@@ -589,7 +589,7 @@ DataAxis.prototype._calculateCharSize = function () {
   if (!('minorCharHeight' in this.props)) {
     var textMinor = document.createTextNode('0');
     var measureCharMinor = document.createElement('div');
-    measureCharMinor.className = 'yAxis minor measure';
+    measureCharMinor.className = 'vis-y-axis vis-minor vis-measure';
     measureCharMinor.appendChild(textMinor);
     this.dom.frame.appendChild(measureCharMinor);
 
@@ -602,7 +602,7 @@ DataAxis.prototype._calculateCharSize = function () {
   if (!('majorCharHeight' in this.props)) {
     var textMajor = document.createTextNode('0');
     var measureCharMajor = document.createElement('div');
-    measureCharMajor.className = 'yAxis major measure';
+    measureCharMajor.className = 'vis-y-axis vis-major vis-measure';
     measureCharMajor.appendChild(textMajor);
     this.dom.frame.appendChild(measureCharMajor);
 
@@ -615,7 +615,7 @@ DataAxis.prototype._calculateCharSize = function () {
   if (!('titleCharHeight' in this.props)) {
     var textTitle = document.createTextNode('0');
     var measureCharTitle = document.createElement('div');
-    measureCharTitle.className = 'yAxis title measure';
+    measureCharTitle.className = 'vis-y-axis vis-title vis-measure';
     measureCharTitle.appendChild(textTitle);
     this.dom.frame.appendChild(measureCharTitle);
 
diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js
index abc471ff..c2be606b 100644
--- a/lib/timeline/component/GraphGroup.js
+++ b/lib/timeline/component/GraphGroup.js
@@ -106,7 +106,7 @@ GraphGroup.prototype.setOptions = function(options) {
 GraphGroup.prototype.update = function(group) {
   this.group = group;
   this.content = group.content || 'graph';
-  this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
+  this.className = group.className || this.className || 'vis-graph-group' + this.groupsUsingDefaultStyles[0] % 10;
   this.visible = group.visible === undefined ? true : group.visible;
   this.style = group.style;
   this.setOptions(group.options);
@@ -132,13 +132,13 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
   outline.setAttributeNS(null, "y", y - fillHeight);
   outline.setAttributeNS(null, "width", iconWidth);
   outline.setAttributeNS(null, "height", 2*fillHeight);
-  outline.setAttributeNS(null, "class", "outline");
+  outline.setAttributeNS(null, "class", "vis-outline");
 
   if (this.options.style == 'line') {
     path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
     path.setAttributeNS(null, "class", this.className);
     if(this.style !== undefined) {
-      path.setAttributeNS(null, "style", this.style);
+      path.setAttributeNS(null, "style", 'vis-' + this.style);
     }
 
     path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
@@ -154,7 +154,7 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
           "L"+ (x + iconWidth) + "," + (y + fillHeight) +
           "L"+ (x + iconWidth) + ","+y);
       }
-      fillPath.setAttributeNS(null, "class", this.className + " iconFill");
+      fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
     }
 
     if (this.options.drawPoints.enabled == true) {
@@ -168,8 +168,8 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
 
     var offset = Math.round((iconWidth - (2 * barWidth))/3);
 
-    DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
-    DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
+    DOMutil.drawBar(x + 0.5*barWidth + offset    , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
+    DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
   }
 };
 
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index b3588c2c..98a0a963 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -47,30 +47,30 @@ function Group (groupId, data, itemSet) {
  */
 Group.prototype._create = function() {
   var label = document.createElement('div');
-  label.className = 'vlabel';
+  label.className = 'vis-label';
   this.dom.label = label;
 
   var inner = document.createElement('div');
-  inner.className = 'inner';
+  inner.className = 'vis-inner';
   label.appendChild(inner);
   this.dom.inner = inner;
 
   var foreground = document.createElement('div');
-  foreground.className = 'group';
+  foreground.className = 'vis-group';
   foreground['timeline-group'] = this;
   this.dom.foreground = foreground;
 
   this.dom.background = document.createElement('div');
-  this.dom.background.className = 'group';
+  this.dom.background.className = 'vis-group';
 
   this.dom.axis = document.createElement('div');
-  this.dom.axis.className = 'group';
+  this.dom.axis.className = 'vis-group';
 
   // create a hidden marker to detect when the Timelines container is attached
   // to the DOM, or the style of a parent of the Timeline is changed from
   // display:none is changed to visible.
   this.dom.marker = document.createElement('div');
-  this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
+  this.dom.marker.style.visibility = 'hidden';
   this.dom.marker.innerHTML = '?';
   this.dom.background.appendChild(this.dom.marker);
 };
@@ -96,10 +96,10 @@ Group.prototype.setData = function(data) {
   this.dom.label.title = data && data.title || '';
 
   if (!this.dom.inner.firstChild) {
-    util.addClassName(this.dom.inner, 'hidden');
+    util.addClassName(this.dom.inner, 'vis-hidden');
   }
   else {
-    util.removeClassName(this.dom.inner, 'hidden');
+    util.removeClassName(this.dom.inner, 'vis-hidden');
   }
 
   // update className
@@ -120,11 +120,11 @@ Group.prototype.setData = function(data) {
 
   // update style
   if (this.style) {
-    util.removeCssText(this.dom.label, this.style);
+    util.removeCssText(this.dom.label, 'vis-' + this.style);
     this.style = null;
   }
   if (data && data.style) {
-    util.addCssText(this.dom.label, data.style);
+    util.addCssText(this.dom.label, 'vis-' + data.style);
     this.style = data.style;
   }
 };
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index afdcf090..dbe0fa1d 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -146,30 +146,30 @@ ItemSet.types = {
  */
 ItemSet.prototype._create = function(){
   var frame = document.createElement('div');
-  frame.className = 'itemset';
+  frame.className = 'vis-itemset';
   frame['timeline-itemset'] = this;
   this.dom.frame = frame;
 
   // create background panel
   var background = document.createElement('div');
-  background.className = 'background';
+  background.className = 'vis-background';
   frame.appendChild(background);
   this.dom.background = background;
 
   // create foreground panel
   var foreground = document.createElement('div');
-  foreground.className = 'foreground';
+  foreground.className = 'vis-foreground';
   frame.appendChild(foreground);
   this.dom.foreground = foreground;
 
   // create axis panel
   var axis = document.createElement('div');
-  axis.className = 'axis';
+  axis.className = 'vis-axis';
   this.dom.axis = axis;
 
   // create labelset
   var labelSet = document.createElement('div');
-  labelSet.className = 'labelset';
+  labelSet.className = 'vis-labelset';
   this.dom.labelSet = labelSet;
 
   // create ungrouped Group
@@ -504,7 +504,7 @@ ItemSet.prototype.redraw = function() {
   this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
 
   // update class name
-  frame.className = 'itemset' + (editable ? ' editable' : '');
+  frame.className = 'vis-itemset' + (editable ? ' vis-editable' : '');
 
   // reorder the groups (if needed)
   resized = this._orderGroups() || resized;
@@ -829,7 +829,7 @@ ItemSet.prototype._onUpdate = function(ids) {
       else if (type == 'rangeoverflow') {
         // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
         throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
-            '.vis.timeline .item.range .content {overflow: visible;}');
+            '.vis-item.vis-range .vis-item-content {overflow: visible;}');
       }
       else {
         throw new TypeError('Unknown item type "' + type + '"');
diff --git a/lib/timeline/component/Legend.js b/lib/timeline/component/Legend.js
index b0ce82a8..3ee1c978 100644
--- a/lib/timeline/component/Legend.js
+++ b/lib/timeline/component/Legend.js
@@ -62,13 +62,13 @@ Legend.prototype.removeGroup = function(label) {
 
 Legend.prototype._create = function() {
   this.dom.frame = document.createElement('div');
-  this.dom.frame.className = 'legend';
+  this.dom.frame.className = 'vis-legend';
   this.dom.frame.style.position = "absolute";
   this.dom.frame.style.top = "10px";
   this.dom.frame.style.display = "block";
 
   this.dom.textArea = document.createElement('div');
-  this.dom.textArea.className = 'legendText';
+  this.dom.textArea.className = 'vis-legend-text';
   this.dom.textArea.style.position = "relative";
   this.dom.textArea.style.top = "0px";
 
diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
index 16ff6b3a..0aed68b3 100644
--- a/lib/timeline/component/LineGraph.js
+++ b/lib/timeline/component/LineGraph.js
@@ -160,7 +160,7 @@ LineGraph.prototype = new Component();
  */
 LineGraph.prototype._create = function(){
   var frame = document.createElement('div');
-  frame.className = 'LineGraph';
+  frame.className = 'vis-line-graph';
   this.dom.frame = frame;
 
   // create svg element for graph drawing.
diff --git a/lib/timeline/component/TimeAxis.js b/lib/timeline/component/TimeAxis.js
index f7433ce9..fba831ff 100644
--- a/lib/timeline/component/TimeAxis.js
+++ b/lib/timeline/component/TimeAxis.js
@@ -94,8 +94,8 @@ TimeAxis.prototype._create = function() {
   this.dom.foreground = document.createElement('div');
   this.dom.background = document.createElement('div');
 
-  this.dom.foreground.className = 'timeaxis foreground';
-  this.dom.background.className = 'timeaxis background';
+  this.dom.foreground.className = 'vis-time-axis vis-foreground';
+  this.dom.background.className = 'vis-time-axis vis-background';
 };
 
 /**
@@ -300,7 +300,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
 
   label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
   label.style.left = x + 'px';
-  label.className = 'text minor ' + className;
+  label.className = 'vis-text vis-minor ' + className;
   //label.title = title;  // TODO: this is a heavy operation
 };
 
@@ -326,7 +326,7 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
   this.dom.majorTexts.push(label);
 
   label.childNodes[0].nodeValue = text;
-  label.className = 'text major ' + className;
+  label.className = 'vis-text vis-major ' + className;
   //label.title = title; // TODO: this is a heavy operation
 
   label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
@@ -361,7 +361,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
   line.style.height = props.minorLineHeight + 'px';
   line.style.left = (x - props.minorLineWidth / 2) + 'px';
 
-  line.className = 'grid vertical minor ' + className;
+  line.className = 'vis-grid vis-vertical vis-minor ' + className;
 
   return line;
 };
@@ -394,7 +394,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
   line.style.left = (x - props.majorLineWidth / 2) + 'px';
   line.style.height = props.majorLineHeight + 'px';
 
-  line.className = 'grid vertical major ' + className;
+  line.className = 'vis-grid vis-vertical vis-major ' + className;
 
   return line;
 };
@@ -411,7 +411,7 @@ TimeAxis.prototype._calculateCharSize = function () {
   // determine the char width and height on the minor axis
   if (!this.dom.measureCharMinor) {
     this.dom.measureCharMinor = document.createElement('DIV');
-    this.dom.measureCharMinor.className = 'text minor measure';
+    this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
     this.dom.measureCharMinor.style.position = 'absolute';
 
     this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
@@ -423,7 +423,7 @@ TimeAxis.prototype._calculateCharSize = function () {
   // determine the char width and height on the major axis
   if (!this.dom.measureCharMajor) {
     this.dom.measureCharMajor = document.createElement('DIV');
-    this.dom.measureCharMajor.className = 'text major measure';
+    this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
     this.dom.measureCharMajor.style.position = 'absolute';
 
     this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
diff --git a/lib/timeline/component/css/animation.css b/lib/timeline/component/css/animation.css
index 0b03f57f..2d5ff87f 100644
--- a/lib/timeline/component/css/animation.css
+++ b/lib/timeline/component/css/animation.css
@@ -1,18 +1,18 @@
-.vis.timeline.root {
+.vis-timeline {
   /*
   -webkit-transition: height .4s ease-in-out;
   transition:         height .4s ease-in-out;
   */
 }
 
-.vis.timeline .vispanel {
+.vis-panel {
   /*
   -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
   transition:         height .4s ease-in-out, top .4s ease-in-out;
   */
 }
 
-.vis.timeline .axis {
+.vis-axis {
   /*
   -webkit-transition: top .4s ease-in-out;
   transition:         top .4s ease-in-out;
@@ -21,12 +21,12 @@
 
 /* TODO: get animation working nicely
 
-.vis.timeline .item {
+.vis-item {
   -webkit-transition: top .4s ease-in-out;
   transition:         top .4s ease-in-out;
 }
 
-.vis.timeline .item.line {
+.vis-item.line {
   -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
   transition:         height .4s ease-in-out, top .4s ease-in-out;
 }
diff --git a/lib/timeline/component/css/currenttime.css b/lib/timeline/component/css/currenttime.css
index 093fc603..46c7b9c3 100644
--- a/lib/timeline/component/css/currenttime.css
+++ b/lib/timeline/component/css/currenttime.css
@@ -1,4 +1,4 @@
-.vis.timeline .currenttime {
+.vis-current-time {
   background-color: #FF7F6E;
   width: 2px;
   z-index: 1;
diff --git a/lib/timeline/component/css/customtime.css b/lib/timeline/component/css/customtime.css
index c590485d..07ca746e 100644
--- a/lib/timeline/component/css/customtime.css
+++ b/lib/timeline/component/css/customtime.css
@@ -1,4 +1,4 @@
-.vis.timeline .customtime {
+.vis-custom-time {
   background-color: #6E94FF;
   width: 2px;
   cursor: move;
diff --git a/lib/timeline/component/css/dataaxis.css b/lib/timeline/component/css/dataaxis.css
index f2c15ca3..f4c85146 100644
--- a/lib/timeline/component/css/dataaxis.css
+++ b/lib/timeline/component/css/dataaxis.css
@@ -1,105 +1,103 @@
 
-.vis.timeline .vispanel.background.horizontal .grid.horizontal {
-    position: absolute;
-    width: 100%;
-    height: 0;
-    border-bottom: 1px solid;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid;
 }
 
-.vis.timeline .vispanel.background.horizontal .grid.minor {
-    border-color: #e5e5e5;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
+  border-color: #e5e5e5;
 }
 
-.vis.timeline .vispanel.background.horizontal .grid.major {
-    border-color: #bfbfbf;
+.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
+  border-color: #bfbfbf;
 }
 
 
-.vis.timeline .dataaxis .yAxis.major {
-    width: 100%;
-    position: absolute;
-    color: #4d4d4d;
-    white-space: nowrap;
+.vis-data-axis .vis-y-axis.vis-major {
+  width: 100%;
+  position: absolute;
+  color: #4d4d4d;
+  white-space: nowrap;
 }
 
-.vis.timeline .dataaxis .yAxis.major.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    border: 0px;
-    visibility: hidden;
-    width: auto;
+.vis-data-axis .vis-y-axis.vis-major.vis-measure {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  visibility: hidden;
+  width: auto;
 }
 
 
-.vis.timeline .dataaxis .yAxis.minor{
-    position: absolute;
-    width: 100%;
-    color: #bebebe;
-    white-space: nowrap;
+.vis-data-axis .vis-y-axis.vis-minor {
+  position: absolute;
+  width: 100%;
+  color: #bebebe;
+  white-space: nowrap;
 }
 
-.vis.timeline .dataaxis .yAxis.minor.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    border: 0px;
-    visibility: hidden;
-    width: auto;
+.vis-data-axis .vis-y-axis.vis-minor.vis-measure {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  visibility: hidden;
+  width: auto;
 }
 
-.vis.timeline .dataaxis .yAxis.title{
-    position: absolute;
-    color: #4d4d4d;
-    white-space: nowrap;
-    bottom: 20px;
-    text-align: center;
+.vis-data-axis .vis-y-axis.vis-title {
+  position: absolute;
+  color: #4d4d4d;
+  white-space: nowrap;
+  bottom: 20px;
+  text-align: center;
 }
 
-.vis.timeline .dataaxis .yAxis.title.measure{
-    padding: 0px 0px 0px 0px;
-    margin: 0px 0px 0px 0px;
-    visibility: hidden;
-    width: auto;
+.vis-data-axis .vis-y-axis.vis-title.vis-measure {
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
+  width: auto;
 }
 
-.vis.timeline .dataaxis .yAxis.title.left {
-    bottom: 0px;
-    -webkit-transform-origin: left top;
-    -moz-transform-origin: left top;
-    -ms-transform-origin: left top;
-    -o-transform-origin: left top;
-    transform-origin: left bottom;
-    -webkit-transform: rotate(-90deg);
-    -moz-transform: rotate(-90deg);
-    -ms-transform: rotate(-90deg);
-    -o-transform: rotate(-90deg);
-    transform: rotate(-90deg);
+.vis-data-axis .vis-y-axis.vis-title.vis-left {
+  bottom: 0;
+  -webkit-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -o-transform-origin: left top;
+  transform-origin: left bottom;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
 }
 
-.vis.timeline .dataaxis .yAxis.title.right {
-    bottom: 0px;
-    -webkit-transform-origin: right bottom;
-    -moz-transform-origin: right bottom;
-    -ms-transform-origin: right bottom;
-    -o-transform-origin: right bottom;
-    transform-origin: right bottom;
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
-    transform: rotate(90deg);
+.vis-data-axis .vis-y-axis.vis-title.vis-right {
+  bottom: 0;
+  -webkit-transform-origin: right bottom;
+  -moz-transform-origin: right bottom;
+  -ms-transform-origin: right bottom;
+  -o-transform-origin: right bottom;
+  transform-origin: right bottom;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 
-.vis.timeline .legend {
-    background-color: rgba(247, 252, 255, 0.65);
-    padding: 5px;
-    border-color: #b3b3b3;
-    border-style:solid;
-    border-width: 1px;
-    box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
+.vis-legend {
+  background-color: rgba(247, 252, 255, 0.65);
+  padding: 5px;
+  border: 1px solid #b3b3b3;
+  box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
 }
 
-.vis.timeline .legendText {
-    /*font-size: 10px;*/
-    white-space: nowrap;
-    display: inline-block
+.vis-legend-text {
+  /*font-size: 10px;*/
+  white-space: nowrap;
+  display: inline-block
 }
\ No newline at end of file
diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index 8b766ab5..a7692afc 100644
--- a/lib/timeline/component/css/item.css
+++ b/lib/timeline/component/css/item.css
@@ -1,5 +1,5 @@
 
-.vis.timeline .item {
+.vis-item {
   position: absolute;
   color: #1A1A1A;
   border-color: #97B0F8;
@@ -9,7 +9,7 @@
   overflow: hidden;
 }
 
-.vis.timeline .item.selected {
+.vis-item.vis-selected {
   border-color: #FFC200;
   background-color: #FFF785;
 
@@ -17,25 +17,25 @@
   z-index: 2;
 }
 
-.vis.timeline .editable .item.selected {
+.vis-editable .vis-item.vis-selected {
   cursor: move;
 }
 
-.vis.timeline .item.point.selected {
+.vis-item.vis-point.vis-selected {
   background-color: #FFF785;
 }
 
-.vis.timeline .item.box {
+.vis-item.vis-box {
   text-align: center;
   border-style: solid;
   border-radius: 2px;
 }
 
-.vis.timeline .item.point {
+.vis-item.vis-point {
   background: none;
 }
 
-.vis.timeline .item.dot {
+.vis-item.vis-dot {
   position: absolute;
   padding: 0;
   border-width: 4px;
@@ -43,13 +43,13 @@
   border-radius: 4px;
 }
 
-.vis.timeline .item.range {
+.vis-item.vis-range {
   border-style: solid;
   border-radius: 2px;
   box-sizing: border-box;
 }
 
-.vis.timeline .item.background {
+.vis-item.background {
   border: none;
   background-color: rgba(213, 221, 246, 0.4);
   box-sizing: border-box;
@@ -57,20 +57,20 @@
   margin: 0;
 }
 
-.vis.timeline .item.range .content {
+.vis-item.vis-range .vis-item-content {
   position: relative;
   display: inline-block;
   max-width: 100%;
 }
 
-.vis.timeline .item.background .content {
+.vis-item.background .vis-item-content {
   position: absolute;
   display: inline-block;
   max-width: 100%;
   margin: 5px;
 }
 
-.vis.timeline .item.line {
+.vis-item.vis-line {
   padding: 0;
   position: absolute;
   width: 0;
@@ -78,13 +78,13 @@
   border-left-style: solid;
 }
 
-.vis.timeline .item .content {
+.vis-item .vis-item-content {
   white-space: nowrap;
   box-sizing: border-box;
   padding: 5px;
 }
 
-.vis.timeline .item .delete {
+.vis-item .vis-delete {
   background: url('img/timeline/delete.png') no-repeat top center;
   position: absolute;
   width: 24px;
@@ -94,7 +94,7 @@
   cursor: pointer;
 }
 
-.vis.timeline .item.range .drag-left {
+.vis-item.vis-range .vis-drag-left {
   position: absolute;
   width: 24px;
   height: 100%;
@@ -104,7 +104,7 @@
   cursor: w-resize;
 }
 
-.vis.timeline .item.range .drag-right {
+.vis-item.vis-range .vis-drag-right {
   position: absolute;
   width: 24px;
   height: 100%;
diff --git a/lib/timeline/component/css/itemset.css b/lib/timeline/component/css/itemset.css
index 884238d1..82276f4b 100644
--- a/lib/timeline/component/css/itemset.css
+++ b/lib/timeline/component/css/itemset.css
@@ -1,5 +1,5 @@
 
-.vis.timeline .itemset {
+.vis-itemset {
   position: relative;
   padding: 0;
   margin: 0;
@@ -7,15 +7,15 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .itemset .background,
-.vis.timeline .itemset .foreground {
+.vis-itemset .vis-background,
+.vis-itemset .vis-foreground {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: visible;
 }
 
-.vis.timeline .axis {
+.vis-axis {
   position: absolute;
   width: 100%;
   height: 0;
@@ -23,12 +23,12 @@
   z-index: 1;
 }
 
-.vis.timeline  .foreground .group {
+.vis-foreground .vis-group {
   position: relative;
   box-sizing: border-box;
   border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline  .foreground .group:last-child {
+.vis-foreground .vis-group:last-child {
   border-bottom: none;
 }
diff --git a/lib/timeline/component/css/labelset.css b/lib/timeline/component/css/labelset.css
index a9246d77..c2690e97 100644
--- a/lib/timeline/component/css/labelset.css
+++ b/lib/timeline/component/css/labelset.css
@@ -1,5 +1,5 @@
 
-.vis.timeline .labelset {
+.vis-labelset {
   position: relative;
 
   overflow: hidden;
@@ -7,7 +7,7 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .labelset .vlabel {
+.vis-labelset .vis-label {
   position: relative;
   left: 0;
   top: 0;
@@ -17,19 +17,19 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .labelset .vlabel {
+.vis-labelset .vis-label {
   border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline .labelset .vlabel:last-child {
+.vis-labelset .vis-label:last-child {
   border-bottom: none;
 }
 
-.vis.timeline .labelset .vlabel .inner {
+.vis-labelset .vis-label .vis-inner {
   display: inline-block;
   padding: 5px;
 }
 
-.vis.timeline .labelset .vlabel .inner.hidden {
+.vis-labelset .vis-label .vis-inner.vis-hidden {
   padding: 0;
 }
diff --git a/lib/timeline/component/css/panel.css b/lib/timeline/component/css/panel.css
index 4c259f77..4c5088a9 100644
--- a/lib/timeline/component/css/panel.css
+++ b/lib/timeline/component/css/panel.css
@@ -1,16 +1,5 @@
 
-.vis.timeline.root {
-  position: relative;
-  border: 1px solid #bfbfbf;
-
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-
-  box-sizing: border-box;
-}
-
-.vis.timeline .vispanel {
+.vis-panel {
   position: absolute;
 
   padding: 0;
@@ -19,53 +8,53 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
+.vis-panel.vis-center,
+.vis-panel.vis-left,
+.vis-panel.vis-right,
+.vis-panel.vis-top,
+.vis-panel.vis-bottom {
   border: 1px #bfbfbf;
 }
 
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.left,
-.vis.timeline .vispanel.right {
+.vis-panel.vis-center,
+.vis-panel.vis-left,
+.vis-panel.vis-right {
   border-top-style: solid;
   border-bottom-style: solid;
   overflow: hidden;
 }
 
-.vis.timeline .vispanel.center,
-.vis.timeline .vispanel.top,
-.vis.timeline .vispanel.bottom {
+.vis-panel.vis-center,
+.vis-panel.vis-top,
+.vis-panel.vis-bottom {
   border-left-style: solid;
   border-right-style: solid;
 }
 
-.vis.timeline .background {
+.vis-background {
   overflow: hidden;
 }
 
-.vis.timeline .vispanel > .content {
+.vis-panel > .vis-content {
   position: relative;
 }
 
-.vis.timeline .vispanel .shadow {
+.vis-panel .vis-shadow {
   position: absolute;
   width: 100%;
   height: 1px;
   box-shadow: 0 0 10px rgba(0,0,0,0.8);
-  /* TODO: find a nice way to ensure shadows are drawn on top of items
+  /* TODO: find a nice way to ensure vis-shadows are drawn on top of items
   z-index: 1;
   */
 }
 
-.vis.timeline .vispanel .shadow.top {
+.vis-panel .vis-shadow.vis-top {
   top: -1px;
   left: 0;
 }
 
-.vis.timeline .vispanel .shadow.bottom {
+.vis-panel .vis-shadow.vis-bottom {
   bottom: -1px;
   left: 0;
 }
\ No newline at end of file
diff --git a/lib/timeline/component/css/pathStyles.css b/lib/timeline/component/css/pathStyles.css
index 22d97ef2..9089e6cc 100644
--- a/lib/timeline/component/css/pathStyles.css
+++ b/lib/timeline/component/css/pathStyles.css
@@ -1,91 +1,91 @@
-.vis.timeline .graphGroup0 {
+.vis-graph-group0 {
     fill:#4f81bd;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #4f81bd;
 }
 
-.vis.timeline .graphGroup1 {
+.vis-graph-group1 {
     fill:#f79646;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #f79646;
 }
 
-.vis.timeline .graphGroup2 {
+.vis-graph-group2 {
     fill: #8c51cf;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #8c51cf;
 }
 
-.vis.timeline .graphGroup3 {
+.vis-graph-group3 {
     fill: #75c841;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #75c841;
 }
 
-.vis.timeline .graphGroup4 {
+.vis-graph-group4 {
     fill: #ff0100;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #ff0100;
 }
 
-.vis.timeline .graphGroup5 {
+.vis-graph-group5 {
     fill: #37d8e6;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #37d8e6;
 }
 
-.vis.timeline .graphGroup6 {
+.vis-graph-group6 {
     fill: #042662;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #042662;
 }
 
-.vis.timeline .graphGroup7 {
+.vis-graph-group7 {
     fill:#00ff26;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #00ff26;
 }
 
-.vis.timeline .graphGroup8 {
+.vis-graph-group8 {
     fill:#ff00ff;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #ff00ff;
 }
 
-.vis.timeline .graphGroup9 {
+.vis-graph-group9 {
     fill: #8f3938;
     fill-opacity:0;
     stroke-width:2px;
     stroke: #8f3938;
 }
 
-.vis.timeline .fill {
+.vis-fill {
     fill-opacity:0.1;
     stroke: none;
 }
 
 
-.vis.timeline .bar {
+.vis-bar {
     fill-opacity:0.5;
     stroke-width:1px;
 }
 
-.vis.timeline .point {
+.vis-point {
     stroke-width:2px;
     fill-opacity:1.0;
 }
 
 
-.vis.timeline .legendBackground {
+.vis-legend-background {
     stroke-width:1px;
     fill-opacity:0.9;
     fill: #ffffff;
@@ -93,14 +93,14 @@
 }
 
 
-.vis.timeline .outline {
+.vis-outline {
     stroke-width:1px;
     fill-opacity:1;
     fill: #ffffff;
     stroke: #e5e5e5;
 }
 
-.vis.timeline .iconFill {
+.vis-icon-fill {
     fill-opacity:0.3;
     stroke: none;
 }
diff --git a/lib/timeline/component/css/timeaxis.css b/lib/timeline/component/css/timeaxis.css
index d6631eb1..efe8e90f 100644
--- a/lib/timeline/component/css/timeaxis.css
+++ b/lib/timeline/component/css/timeaxis.css
@@ -1,15 +1,15 @@
-.vis.timeline .timeaxis {
+.vis-time-axis {
   position: relative;
   overflow: hidden;
 }
 
-.vis.timeline .timeaxis.foreground {
+.vis-time-axis.vis-foreground {
   top: 0;
   left: 0;
   width: 100%;
 }
 
-.vis.timeline .timeaxis.background {
+.vis-time-axis.vis-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -17,14 +17,14 @@
   height: 100%;
 }
 
-.vis.timeline .timeaxis .text {
+.vis-time-axis .vis-text {
   position: absolute;
   color: #4d4d4d;
   padding: 3px;
   white-space: nowrap;
 }
 
-.vis.timeline .timeaxis .text.measure {
+.vis-time-axis .vis-text.vis-measure {
   position: absolute;
   padding-left: 0;
   padding-right: 0;
@@ -33,15 +33,15 @@
   visibility: hidden;
 }
 
-.vis.timeline .timeaxis .grid.vertical {
+.vis-time-axis .vis-grid.vis-vertical {
   position: absolute;
   border-left: 1px solid;
 }
 
-.vis.timeline .timeaxis .grid.minor {
+.vis-time-axis .vis-grid.vis-minor {
   border-color: #e5e5e5;
 }
 
-.vis.timeline .timeaxis .grid.major {
+.vis-time-axis .vis-grid.vis-major {
   border-color: #bfbfbf;
 }
diff --git a/lib/timeline/component/css/timeline.css b/lib/timeline/component/css/timeline.css
index 1762960d..a45d467c 100644
--- a/lib/timeline/component/css/timeline.css
+++ b/lib/timeline/component/css/timeline.css
@@ -1,2 +1,11 @@
-.vis.timeline {
+
+.vis-timeline {
+  position: relative;
+  border: 1px solid #bfbfbf;
+
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
 }
diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js
index b98eefc1..41ea08fb 100644
--- a/lib/timeline/component/graph2d_types/bar.js
+++ b/lib/timeline/component/graph2d_types/bar.js
@@ -109,7 +109,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
         else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
       }
     }
-    DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
+    DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
     // draw points
     if (group.options.drawPoints.enabled == true) {
       Points.draw([combinedData[i]], group, framework, drawData.offset);
diff --git a/lib/timeline/component/graph2d_types/line.js b/lib/timeline/component/graph2d_types/line.js
index b9e1add5..cfb7cd0d 100644
--- a/lib/timeline/component/graph2d_types/line.js
+++ b/lib/timeline/component/graph2d_types/line.js
@@ -31,7 +31,7 @@ Line.prototype.draw = function (dataset, group, framework) {
       path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
       path.setAttributeNS(null, "class", group.className);
       if(group.style !== undefined) {
-        path.setAttributeNS(null, "style", group.style);
+        path.setAttributeNS(null, "style", 'vis-' + group.style);
       }
 
       // construct path from dataset
@@ -52,11 +52,11 @@ Line.prototype.draw = function (dataset, group, framework) {
         else {
           dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
         }
-        fillPath.setAttributeNS(null, "class", group.className + " fill");
+        fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill');
         if(group.options.shaded.style !== undefined) {
-          fillPath.setAttributeNS(null, "style", group.options.shaded.style);
+          fillPath.setAttributeNS(null, 'style', group.options.shaded.style);
         }
-        fillPath.setAttributeNS(null, "d", dFill);
+        fillPath.setAttributeNS(null, 'd', dFill);
       }
       // copy properties to path for drawing.
       path.setAttributeNS(null, 'd', 'M' + d);
diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js
index 6f906b9a..41d820d5 100644
--- a/lib/timeline/component/item/BackgroundItem.js
+++ b/lib/timeline/component/item/BackgroundItem.js
@@ -39,7 +39,7 @@ function BackgroundItem (data, conversion, options) {
 
 BackgroundItem.prototype = new Item (null, null, null);
 
-BackgroundItem.prototype.baseClassName = 'item background';
+BackgroundItem.prototype.baseClassName = 'vis-item vis-background';
 BackgroundItem.prototype.stack = false;
 
 /**
@@ -68,7 +68,7 @@ BackgroundItem.prototype.redraw = function() {
 
     // contents box
     dom.content = document.createElement('div');
-    dom.content.className = 'content';
+    dom.content.className = 'vis-item-content';
     dom.box.appendChild(dom.content);
 
     // Note: we do NOT attach this item as attribute to the DOM,
@@ -103,7 +103,7 @@ BackgroundItem.prototype.redraw = function() {
 
     // update class
     var className = (this.data.className ? (' ' + this.data.className) : '') +
-        (this.selected ? ' selected' : '');
+        (this.selected ? ' vis-selected' : '');
     dom.box.className = this.baseClassName + className;
 
     // determine from css whether this box has overflow
diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js
index f04cd6cd..e96c8e81 100644
--- a/lib/timeline/component/item/BoxItem.js
+++ b/lib/timeline/component/item/BoxItem.js
@@ -62,16 +62,16 @@ BoxItem.prototype.redraw = function() {
 
     // contents box (inside the background box). used for making margins
     dom.content = document.createElement('DIV');
-    dom.content.className = 'content';
+    dom.content.className = 'vis-item-content';
     dom.box.appendChild(dom.content);
 
     // line to axis
     dom.line = document.createElement('DIV');
-    dom.line.className = 'line';
+    dom.line.className = 'vis-line';
 
     // dot on axis
     dom.dot = document.createElement('DIV');
-    dom.dot.className = 'dot';
+    dom.dot.className = 'vis-dot';
 
     // attach this item as attribute
     dom.box['timeline-item'] = this;
@@ -112,10 +112,10 @@ BoxItem.prototype.redraw = function() {
 
     // update class
     var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    dom.box.className = 'item box' + className;
-    dom.line.className = 'item line' + className;
-    dom.dot.className  = 'item dot' + className;
+        (this.selected ? ' vis-selected' : '');
+    dom.box.className = 'vis-item vis-box' + className;
+    dom.line.className = 'vis-item vis-line' + className;
+    dom.dot.className  = 'vis-item vis-dot' + className;
 
     // recalculate size
     this.props.dot.height = dom.dot.offsetHeight;
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index 9b1e327e..a642a3c0 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -134,7 +134,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
     var me = this;
 
     var deleteButton = document.createElement('div');
-    deleteButton.className = 'delete';
+    deleteButton.className = 'vis-delete';
     deleteButton.title = 'Delete this item';
 
     // TODO: be able to destroy the delete button
@@ -199,7 +199,7 @@ Item.prototype._updateTitle = function (element) {
     element.title = this.data.title || '';
   }
   else {
-    element.removeAttribute('title');
+    element.removeAttribute('vis-title');
   }
 };
 
diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js
index 8ec6db21..fbaf14cb 100644
--- a/lib/timeline/component/item/PointItem.js
+++ b/lib/timeline/component/item/PointItem.js
@@ -63,7 +63,7 @@ PointItem.prototype.redraw = function() {
 
     // contents box, right from the dot
     dom.content = document.createElement('div');
-    dom.content.className = 'content';
+    dom.content.className = 'vis-item-content';
     dom.point.appendChild(dom.content);
 
     // dot at start
@@ -100,10 +100,10 @@ PointItem.prototype.redraw = function() {
     this._updateStyle(this.dom.point);
 
     // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    dom.point.className  = 'item point' + className;
-    dom.dot.className  = 'item dot' + className;
+    var className = (this.data.className ? ' ' + this.data.className : '') +
+        (this.selected ? ' vis-selected' : '');
+    dom.point.className  = 'vis-item vis-point' + className;
+    dom.dot.className  = 'vis-item vis-dot' + className;
 
     // recalculate size
     this.width = dom.point.offsetWidth;
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index c04c3765..377a0993 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -34,7 +34,7 @@ function RangeItem (data, conversion, options) {
 
 RangeItem.prototype = new Item (null, null, null);
 
-RangeItem.prototype.baseClassName = 'item range';
+RangeItem.prototype.baseClassName = 'vis-item vis-range';
 
 /**
  * Check whether this item is visible inside given range
@@ -62,7 +62,7 @@ RangeItem.prototype.redraw = function() {
 
     // contents box
     dom.content = document.createElement('div');
-    dom.content.className = 'content';
+    dom.content.className = 'vis-item-content';
     dom.box.appendChild(dom.content);
 
     // attach this item as attribute
@@ -96,7 +96,7 @@ RangeItem.prototype.redraw = function() {
 
     // update class
     var className = (this.data.className ? (' ' + this.data.className) : '') +
-        (this.selected ? ' selected' : '');
+        (this.selected ? ' vis-selected' : '');
     dom.box.className = this.baseClassName + className;
 
     // determine from css whether this box has overflow
@@ -246,7 +246,7 @@ RangeItem.prototype._repaintDragLeft = function () {
   if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
     // create and show drag area
     var dragLeft = document.createElement('div');
-    dragLeft.className = 'drag-left';
+    dragLeft.className = 'vis-drag-left';
     dragLeft.dragLeftItem = this;
 
     this.dom.box.appendChild(dragLeft);
@@ -269,7 +269,7 @@ RangeItem.prototype._repaintDragRight = function () {
   if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
     // create and show drag area
     var dragRight = document.createElement('div');
-    dragRight.className = 'drag-right';
+    dragRight.className = 'vis-drag-right';
     dragRight.dragRightItem = this;
 
     this.dom.box.appendChild(dragRight);