diff --git a/README.md b/README.md
index 47a647d..c9ba8d0 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
-core-splitter
+iron-splitter
 =============
 
+Based on core-splitter, upgraded to Polymer 1.0 by Juan Carlos Orozco (Feb. 2016)
+
 See the [component page](https://www.polymer-project.org/0.5/docs/elements/core-splitter.html) for more information.
diff --git a/bower.json b/bower.json
index a2e9742..6e83b70 100644
--- a/bower.json
+++ b/bower.json
@@ -1,8 +1,10 @@
 {
-  "name": "core-splitter",
+  "name": "iron-splitter",
   "private": true,
+  "main": "",
   "dependencies": {
-    "polymer": "Polymer/polymer#master",
-    "core-resizable": "Polymer/core-resizable#master"
+    "polymer": "Polymer/polymer#^1.2.0",
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout"
   }
-}
\ No newline at end of file
+}
diff --git a/core-splitter.html b/core-splitter.html
deleted file mode 100644
index f60feaf..0000000
--- a/core-splitter.html
+++ /dev/null
@@ -1,163 +0,0 @@
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-
-<!--
-`core-splitter` provides a split bar and dragging on the split bar
-will resize the sibling element.  Use its `direction` property to indicate
-which sibling element to be resized and the orientation.  Usually you would want
-to use `core-splitter` along with flex layout so that the other sibling
-element can be _flexible_.
-
-Example:
-
-    <div horizontal layout>
-      <div>left</div>
-      <core-splitter direction="left"></core-splitter>
-      <div flex>right</div>
-    </div>
-
-In the above example, dragging the splitter will resize the _left_ element.  And
-since the parent container is a flexbox and the _right_ element has
-`flex`, the _right_ element will be auto-resized.
-
-For horizontal splitter set `direction` to `up` or `down`.
-
-Example:
-
-    <div vertical layout>
-      <div>top</div>
-      <core-splitter direction="up"></core-splitter>
-      <div flex>bottom</div>
-    </div>
-
-@group Polymer Core Elements
-@element core-splitter
-@mixins Polymer.CoreResizer https://github.com/polymer/core-resizable
-@homepage github.io
--->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../core-resizable/core-resizable.html">
-
-<polymer-element name="core-splitter" attributes="direction locked minSize allowOverflow"
-    on-trackstart="{{trackStart}}" on-track="{{track}}" on-down="{{preventSelection}}">
-
-<template>
-
-  <link rel="stylesheet" href="core-splitter.css">
-
-</template>
-<script>
-
-  Polymer(Polymer.mixin({
-
-    /**
-     * Possible values are `left`, `right`, `up` and `down`.
-     *
-     * @attribute direction
-     * @type string
-     * @default 'left'
-     */
-    direction: 'left',
-
-    /**
-     * Minimum width to which the splitter target can be sized, e.g. 
-     * `minSize="100px"`
-     *
-     * @attribute minSize
-     * @type string
-     * @default ''
-     */
-    minSize: '',
-
-    /**
-     * Locks the split bar so it can't be dragged.
-     *
-     * @attribute locked
-     * @type boolean
-     * @default false
-     */
-    locked: false,
-
-    /**
-     * By default the parent and siblings of the splitter are set to overflow hidden. This helps
-     * avoid elements bleeding outside the splitter regions. Set this property to true to allow
-     * these elements to overflow.
-     *
-     * @attribute allowOverflow
-     * @type boolean
-     * @default false
-     */
-    allowOverflow: false,
-
-    // Listen for resize requests on parent, since splitter is peer to resizables
-    resizerIsPeer: true,
-
-    ready: function() {
-      this.directionChanged();
-    },
-
-    attached: function() {
-      this.resizerAttachedHandler();
-    },
-
-    detached: function() {
-      this.resizerDetachedHandler();
-    },
-
-    domReady: function() {
-      if (!this.allowOverflow) {
-        this.parentNode.style.overflow = this.nextElementSibling.style.overflow =
-            this.previousElementSibling.style.overflow = 'hidden';
-      }
-    },
-
-    directionChanged: function() {
-      this.isNext = this.direction === 'right' || this.direction === 'down';
-      this.horizontal = this.direction === 'up' || this.direction === 'down';
-      this.update();
-    },
-
-    update: function() {
-      this.target = this.isNext ? this.nextElementSibling : this.previousElementSibling;
-      this.dimension = this.horizontal ? 'height' : 'width';
-      this.classList.toggle('horizontal', this.horizontal);
-    },
-
-    targetChanged: function(old) {
-      if (old) {
-        old.style[old.__splitterMinSize] = '';
-      }
-      var min = this.target.__splitterMinSize = this.horizontal ? 'minHeight' : 'minWidth';
-      this.target.style[min] = this.minSize;
-    },
-
-    trackStart: function() {
-      this.update();
-      this.size = parseInt(getComputedStyle(this.target)[this.dimension]);
-    },
-
-    track: function(e) {
-      if (this.locked) {
-        return;
-      }
-      var d = e[this.horizontal ? 'dy' : 'dx'];
-      this.target.style[this.dimension] =
-          this.size + (this.isNext ? -d : d) + 'px';
-      this.notifyResize();
-    },
-
-    preventSelection: function(e) {
-      e.preventDefault();
-    }
-
-  }, Polymer.CoreResizer));
-
-</script>
-</polymer-element>
diff --git a/demo.html b/demo.html
index 539e31d..605eb56 100644
--- a/demo.html
+++ b/demo.html
@@ -1,20 +1,19 @@
-<!doctype html>
-<!--
+<!DOCTYPE html><!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-<head>
-  <title>core-splitter</title>
+--><html><head>
+  <title>iron-splitter</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   
-  <script src="../webcomponentsjs/webcomponents.js"></script>
   
-  <link rel="import" href="core-splitter.html">
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <!-- <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> -->
+
+  <link rel="import" href="iron-splitter.html">
   
   <style>
   
@@ -33,44 +32,63 @@
     
   </style>
   
+  <style is="custom-style">
+    /* TODO(polyup): For speed, consider reworking these styles with .classes
+                     and #ids rather than [attributes].
+    */
+    [layout] {
+      @apply(--layout);
+    }
+    [layout][horizontal] {
+      @apply(--layout-horizontal);
+    }
+    [layout][vertical] {
+      @apply(--layout-vertical);
+    }
+    [flex] {
+      @apply(--layout-flex);
+    }
+  </style>
+  <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 </head>
-<body unresolved>
+<body unresolved="">
 
-  <div class="container" horizontal layout>
+  <div class="container" horizontal="" layout="">
     <div>left (min: 128px)</div>
-    <core-splitter direction="left" minSize="128px"></core-splitter>
-    <div flex>right</div>
+    <iron-splitter direction="left" minsize="128px"></iron-splitter>
+    <div flex="">right</div>
   </div>
   
   <br>
   
-  <div class="container" vertical layout>
+  <div class="container" vertical="" layout="">
     <div id="box2">top</div>
-    <core-splitter direction="up"></core-splitter>
-    <div flex>bottom</div>
+    <iron-splitter direction="up"></iron-splitter>
+    <div flex="">bottom</div>
   </div>
   
   <br>
   
-  <div class="container" horizontal layout>
+  <div class="container" horizontal="" layout="">
     <div id="box3">1</div>
-    <core-splitter direction="left"></core-splitter>
-    <div flex vertical layout>
+    <iron-splitter direction="left"></iron-splitter>
+    <div flex="" vertical="" layout="">
       <div id="box4">2</div>
-      <core-splitter direction="up"></core-splitter>
-      <div flex>3</div>
+      <iron-splitter direction="up"></iron-splitter>
+      <div flex="">3</div>
     </div>
   </div>
   
   <br>
   
-  <div class="container" horizontal layout>
+  <div class="container horizontal layout" horizontal="" layout="">
     <div id="box5">left</div>
-    <core-splitter direction="left"></core-splitter>
+    <iron-splitter direction="left"></iron-splitter>
     <div flex>center</div>
-    <core-splitter direction="right"></core-splitter>
+    <iron-splitter direction="right"></iron-splitter>
     <div id="box6">right</div>
   </div>
   
-</body>
-</html>
+
+
+</body></html>
diff --git a/core-splitter.css b/iron-splitter.css
similarity index 100%
rename from core-splitter.css
rename to iron-splitter.css
diff --git a/iron-splitter.html b/iron-splitter.html
new file mode 100644
index 0000000..dae390f
--- /dev/null
+++ b/iron-splitter.html
@@ -0,0 +1,182 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+--><!--
+`iron-splitter` provides a split bar and dragging on the split bar
+will resize the sibling element.  Use its `direction` property to indicate
+which sibling element to be resized and the orientation.  Usually you would want
+to use `iron-splitter` along with flex layout so that the other sibling
+element can be _flexible_.
+
+Example:
+
+    <div horizontal layout>
+      <div>left</div>
+      <iron-splitter direction="left"></iron-splitter>
+      <div flex>right</div>
+    </div>
+
+In the above example, dragging the splitter will resize the _left_ element.  And
+since the parent container is a flexbox and the _right_ element has
+`flex`, the _right_ element will be auto-resized.
+
+For horizontal splitter set `direction` to `up` or `down`.
+
+Example:
+
+    <div vertical layout>
+      <div>top</div>
+      <iron-splitter direction="up"></iron-splitter>
+      <div flex>bottom</div>
+    </div>
+
+@group Polymer Iron Elements
+@element iron-splitter
+@mixins Polymer.IronResizableBehavior https://github.com/PolymerElements/iron-resizable-behavior
+@mixins Polymer.IronResizableBehavior https://github.com/PolymerElements/iron-flex-layout
+@homepage github.io
+-->
+<html><head>
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+
+<dom-module id="iron-splitter">
+  <link rel="import" type="css" href="iron-splitter.css">
+  <template>
+  </template>
+  <script>
+    Polymer({
+      is: 'iron-splitter',
+      behaviors: [Polymer.IronResizableBehavior],
+      properties: {
+        /**
+         * By default the parent and siblings of the splitter are set to overflow hidden. This helps
+         * avoid elements bleeding outside the splitter regions. Set this property to true to allow
+         * these elements to overflow.
+         *
+         * @attribute allowOverflow
+         * @type boolean
+         * @default false
+         */
+        allowOverflow: {
+          type: Boolean,
+          value: false,
+          notify: true
+        },
+        /**
+         * Possible values are `left`, `right`, `up` and `down`.
+         *
+         * @attribute direction
+         * @type string
+         * @default 'left'
+         */
+        direction: {
+          type: String,
+          value: 'left',
+          notify: true,
+          observer: 'directionChanged'
+        },
+        /**
+         * Locks the split bar so it can't be dragged.
+         *
+         * @attribute locked
+         * @type boolean
+         * @default false
+         */
+        locked: {
+          type: Boolean,
+          value: false,
+          notify: true
+        },
+        /**
+         * Minimum width to which the splitter target can be sized, e.g. 
+         * `minSize="100px"`
+         *
+         * @attribute minSize
+         * @type string
+         * @default ''
+         */
+        minSize: {
+          type: String,
+          value: '',
+          notify: true
+        },
+        // Listen for resize requests on parent, since splitter is peer to resizables
+        resizerIsPeer: {
+          type: Boolean,
+          value: true
+        },
+        target: { observer: 'targetChanged' }
+      },
+      ready: function () {
+        this.directionChanged();
+        if (!this.allowOverflow) {
+          this.set('parentNode.style.overflow', this.set('nextElementSibling.style.overflow', this.set('previousElementSibling.style.overflow', 'hidden')));
+        }
+      },
+      //attached: function () {
+      //  this.resizerAttachedHandler();
+      //},
+      //detached: function () {
+      //  this.resizerDetachedHandler();
+      //},
+      directionChanged: function () {
+        this.isNext = this.direction === 'right' || this.direction === 'down';
+        this.horizontal = this.direction === 'up' || this.direction === 'down';
+        this.update();
+      },
+      update: function () {
+        this.target = this.isNext ? this.nextElementSibling : this.previousElementSibling;
+        this.dimension = this.horizontal ? 'height' : 'width';
+        Polymer.dom(this).classList.toggle('horizontal', this.horizontal);
+      },
+      targetChanged: function (_, old) {
+        if (old) {
+          old.style[old.__splitterMinSize] = '';
+        }
+        var min = this.set('target.__splitterMinSize', this.horizontal ? 'minHeight' : 'minWidth');
+        this.set('target.style' + ('.' + min), this.minSize);
+      },
+      //trackStart: function () {
+      //  this.update();
+      //  this.size = parseInt(getComputedStyle(this.target)[this.dimension]);
+      //},
+      track: function (e) {
+        if (this.locked) {
+          return;
+        }
+        switch(e.detail.state) {
+          case 'start':
+            //this.message = 'Tracking started!';
+            this.update();
+            this.size = parseInt(getComputedStyle(this.target)[this.dimension]);
+            break;
+          case 'track':
+            //console.log(e.detail.x);
+            //this.message = 'Tracking in progress... ' +
+            //  e.detail.x + ', ' + e.detail.y;
+            var d = e.detail[this.horizontal ? 'dy' : 'dx'];
+            this.set('target.style' + ('.' + this.dimension), this.size + (this.isNext ? -d : d) + 'px');
+            this.notifyResize();
+            break;
+          case 'end':
+            //this.message = 'Tracking ended!';
+            break;
+        }
+      },
+      preventSelection: function (e) {
+        //e.preventDefault();
+      },
+      listeners: {
+        //trackstart: 'trackStart',
+        'track': 'track',
+        'down': 'preventSelection'
+      }
+    });
+  </script>
+</dom-module>