diff --git a/js/src/old/es6Template.js b/js/src/old/es6Template.js
index 9e09b326..f59ec092 100644
--- a/js/src/old/es6Template.js
+++ b/js/src/old/es6Template.js
@@ -116,7 +116,7 @@ const Foo = (($) => {
    */
   $.fn[NAME] = Foo._jQueryInterface
   $.fn[NAME].Constructor = Foo
-  $.fn[NAME].noConflict = function () {
+  $.fn[NAME].noConflict = function() {
     $.fn[NAME] = JQUERY_NO_CONFLICT
     return Foo._jQueryInterface
   }
diff --git a/js/src/ripples.js b/js/src/ripples.js
index 97b5f05a..1c3ff9a2 100644
--- a/js/src/ripples.js
+++ b/js/src/ripples.js
@@ -1,4 +1,3 @@
-// FIXME: convert to member variable use instead of passing around/finding?
 const Ripples = (($) => {
 
   /**
@@ -8,22 +7,9 @@ const Ripples = (($) => {
    */
   const NAME = 'ripples'
   const DATA_KEY = `bmd.${NAME}`
-  // const EVENT_KEY = `.${DATA_KEY}`
-  // const DATA_API_KEY = '.data-api'
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   const DEFAULT_OPTIONS = {}
 
-  // const Selector = {
-  //  DATA_DISMISS: '[data-dismiss="ripples"]'
-  // }
-  //
-  // const Event = {
-  //  CLOSE: `close${EVENT_KEY}`,
-  //  CLOSED: `closed${EVENT_KEY}`,
-  //  CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
-  // }
-
-
   /**
    * ------------------------------------------------------------------------
    * Class Definition
@@ -34,106 +20,87 @@ const Ripples = (($) => {
     constructor(element, options) {
       this._element = $(element)
       this._options = $.extend({}, DEFAULT_OPTIONS, options)
-      this._element.on("mousedown touchstart", this._createRipple)
-    }
-
-    // getters
-    static get NAME() {
-      return NAME
-    }
-
-    // public
-    close(element) {
-      element = element || this._element
-
-      let rootElement = this._getRootElement(element)
-      let customEvent = this._triggerCloseEvent(rootElement)
-
-      if (customEvent.isDefaultPrevented()) {
-        return
-      }
-
-      this._removeElement(rootElement)
+      this._element.on("mousedown touchstart", this._onStartRipple)
     }
 
     dispose() {
       $.removeData(this._element, DATA_KEY)
       this._element = null
+      this._containerElement = null
+      this._rippleElement = null
+      this._options = null
     }
 
-
     // ------------------------------------------------------------------------
     // private
 
-    _createRipple(event) {
+    _onStartRipple(event) {
 
       // Verify if the user is just touching on a device and return if so
       if (this.isTouch() && event.type === "mousedown") {
         return
       }
 
-      // Verify if the current element already has a ripple wrapper element and creates if it doesn't
-      if (!(this._element.find(".ripple-container").length)) {
-        this._element.append("<div class='ripple-container'></div>")
-      }
+      // Find or create the ripple container element
+      this._findOrCreateContainer()
 
-      // Find the ripple wrapper
-      let containerElement = this._element.children(".ripple-container")
-
-      // Get relY and relX positions
-      let relY = this._getRelY(containerElement, event)
-      let relX = this._getRelX(containerElement, event)
+      // Get relY and relX positions of the container element
+      let relY = this._getRelY(event)
+      let relX = this._getRelX(event)
 
       // If relY and/or relX are false, return the event
       if (!relY && !relX) {
         return
       }
 
-      // Get the ripple color
-      let rippleColor = this._getRipplesColor(this._element)
-
-      // Create the ripple element
-      let rippleElement = $("<div></div>")
-
-      rippleElement.addClass("ripple").css(`left: ${relX}; top: ${relY};  background-color: ${rippleColor}`)
-      /* https://github.com/eslint/eslint/issues/4579
-       rippleElement.addClass("ripple").css({
+      // set the location and color each time (even if element is cached)
+      this._rippleElement.addClass("ripple").css({
        "left": relX,
        "top": relY,
-       "background-color": rippleColor
+       "background-color": this._getRipplesColor()
        })
-       */
-
-      // Append the ripple to the wrapper
-      containerElement.append(rippleElement)
 
       // Make sure the ripple has the styles applied (ugly hack but it works)
-      (() => { return window.getComputedStyle(rippleElement[0]).opacity })()
+      this._forceStyleApplication()
 
       // Turn on the ripple animation
-      this.rippleOn(this._element, rippleElement)
+      this.rippleOn()
 
       // Call the rippleEnd function when the transition "on" ends
       setTimeout(() => {
-        this.rippleEnd(rippleElement)
+        this.rippleEnd()
       }, 500)
 
-      // Detect when the user leaves the element
+      // Detect when the user leaves the element (attach only when necessary for performance)
       this._element.on("mouseup mouseleave touchend", () => {
-        rippleElement.data("mousedown", "off")
+        this._rippleElement.data("mousedown", "off")
 
-        if (rippleElement.data("animating") === "off") {
-          this.rippleOut(rippleElement)
+        if (this._rippleElement.data("animating") === "off") {
+          this.rippleOut()
         }
       })
     }
 
+    _findOrCreateContainer() {
+      if (!this._containerElement || !this._containerElement.length > 0) {
+        this._element.append("<div class='ripple-container'><div class='ripple'></div></div>")
+        this._containerElement = this._element.find(".ripple-container")
+        this._rippleElement = this._containerElement.find("div.ripple")
+      }
+
+      return this._containerElement
+    }
+
+    // Make sure the ripple has the styles applied (ugly hack but it works)
+    _forceStyleApplication() {
+      return window.getComputedStyle(this._rippleElement[0]).opacity
+    }
 
     /**
      * Get the relX
      */
-    _getRelX(containerElement, event) {
-      let wrapperOffset = containerElement.offset()
+    _getRelX(event) {
+      let wrapperOffset = this._containerElement.offset()
 
       let result = null
       if (!this.isTouch()) {
@@ -154,19 +121,18 @@ const Ripples = (($) => {
       return result
     }
 
-
     /**
      * Get the relY
      */
-    _getRelY(containerElement, event) {
-      let wrapperOffset = containerElement.offset()
+    _getRelY(event) {
+      let containerOffset = this._containerElement.offset()
       let result = null
 
       if (!this.isTouch()) {
         /**
          * Get the mouse position relative to the ripple wrapper
          */
-        result = event.pageY - wrapperOffset.top
+        result = event.pageY - containerOffset.top
       } else {
         /**
          * Make sure the user is using only one finger and then get the touch
@@ -175,7 +141,7 @@ const Ripples = (($) => {
         event = event.originalEvent
 
         if (event.touches.length === 1) {
-          result =  event.touches[0].pageY - wrapperOffset.top
+          result =  event.touches[0].pageY - containerOffset.top
         } else {
           result = false
         }
@@ -184,16 +150,14 @@ const Ripples = (($) => {
       return result
     }
 
-
     /**
      * Get the ripple color
      */
-    _getRipplesColor(element) {
-      let color = element.data("ripple-color") ? element.data("ripple-color") : window.getComputedStyle(element[0]).color
+    _getRipplesColor() {
+      let color = this._element.data("ripple-color") ? this._element.data("ripple-color") : window.getComputedStyle(this._element[0]).color
       return color
     }
 
-
     /**
      * Verify if the client browser has transistion support
      */
@@ -212,7 +176,6 @@ const Ripples = (($) => {
       return support
     }
 
-
     /**
      * Verify if the client is using a mobile device
      */
@@ -220,47 +183,44 @@ const Ripples = (($) => {
       return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
     }
 
-
     /**
      * End the animation of the ripple
      */
-    rippleEnd(rippleElement) {
-      rippleElement.data("animating", "off")
+    rippleEnd() {
+      this._rippleElement.data("animating", "off")
 
-      if (rippleElement.data("mousedown") === "off") {
-        this.rippleOut(rippleElement)
+      if (this._rippleElement.data("mousedown") === "off") {
+        this.rippleOut(this._rippleElement)
       }
     }
 
-
     /**
      * Turn off the ripple effect
      */
-    rippleOut(rippleElement) {
-      rippleElement.off()
+    rippleOut() {
+      this._rippleElement.off()
 
       if (this._hasTransitionSupport()) {
-        rippleElement.addClass("ripple-out")
+        this._rippleElement.addClass("ripple-out")
       } else {
-        rippleElement.animate({ "opacity": 0 }, 100, () => {
-          rippleElement.trigger("transitionend")
+        this._rippleElement.animate({ "opacity": 0 }, 100, () => {
+          this._rippleElement.trigger("transitionend")
         })
       }
 
-      rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => {
-        rippleElement.remove()
+      this._rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => {
+        this._rippleElement.remove()
       })
     }
 
-
     /**
      * Turn on the ripple effect
      */
-    rippleOn(element, rippleElement) {
-      let size = this._getNewSize(element, rippleElement)
+    rippleOn() {
+      let size = this._getNewSize()
 
       if (this._hasTransitionSupport()) {
-        rippleElement
+        this._rippleElement
           .css({
             "-ms-transform": `scale(${size})`,
             "-moz-transform": `scale(${size})`,
@@ -271,28 +231,27 @@ const Ripples = (($) => {
           .data("animating", "on")
           .data("mousedown", "on")
       } else {
-        rippleElement.animate({
-          "width": Math.max(element.outerWidth(), element.outerHeight()) * 2,
-          "height": Math.max(element.outerWidth(), element.outerHeight()) * 2,
-          "margin-left": Math.max(element.outerWidth(), element.outerHeight()) * (-1),
-          "margin-top": Math.max(element.outerWidth(), element.outerHeight()) * (-1),
+        this._rippleElement.animate({
+          "width": Math.max(this._element.outerWidth(), this._element.outerHeight()) * 2,
+          "height": Math.max(this._element.outerWidth(), this._element.outerHeight()) * 2,
+          "margin-left": Math.max(this._element.outerWidth(), this._element.outerHeight()) * (-1),
+          "margin-top": Math.max(this._element.outerWidth(), this._element.outerHeight()) * (-1),
           "opacity": 0.2
         }, 500, () => {
-          rippleElement.trigger("transitionend")
+          this._rippleElement.trigger("transitionend")
         })
       }
     }
 
-
-    // ------------------------------------------------------------------------
-    // static
     /**
      * Get the new size based on the element height/width and the ripple width
      */
-    static _getNewSize(element, rippleElement) {
-      return (Math.max(element.outerWidth(), element.outerHeight()) / rippleElement.outerWidth()) * 2.5
+    _getNewSize() {
+      return (Math.max(this._element.outerWidth(), this._element.outerHeight()) / this._rippleElement.outerWidth()) * 2.5
     }
 
+    // ------------------------------------------------------------------------
+    // static
 
     static _jQueryInterface(options) {
       return this.each(() => {
@@ -305,32 +264,8 @@ const Ripples = (($) => {
         }
       })
     }
-
-    // static _handleClose(fooInstance) {
-    //  return function(event) {
-    //    if (event) {
-    //      event.preventDefault()
-    //    }
-    //
-    //    fooInstance.close(this)
-    //  }
-    // }
   }
 
-
-  /**
-   * ------------------------------------------------------------------------
-   * Data Api implementation
-   * ------------------------------------------------------------------------
-   */
-
-  // $(document).on(
-  //  Event.CLICK_DATA_API,
-  //  Selector.DATA_DISMISS,
-  //  Ripples._handleClose(new Ripples())
-  // )
-
-
   /**
    * ------------------------------------------------------------------------
    * jQuery