diff --git a/src/components/main-app.js b/src/components/main-app.js
index 7a3d979..64e6c9e 100644
--- a/src/components/main-app.js
+++ b/src/components/main-app.js
@@ -17,6 +17,7 @@ class MainApp extends IgniteElement {
                 new div(
                     new RowAccordian()
                         .property("title", "Defining a new component/element")
+                        .property("show", true)
                         .child("<h1>This is the content</h1><h2>hopefully a lot of it</h2><h2>this should give an idea</h2>"),
                     new RowAccordian()
                         .property("title", "Defining a new component/element")
diff --git a/src/components/row-accordian.js b/src/components/row-accordian.js
index 99f699d..df3eb95 100644
--- a/src/components/row-accordian.js
+++ b/src/components/row-accordian.js
@@ -9,7 +9,7 @@ class RowAccordian extends IgniteElement {
     get properties() {
         return {
             title: "Title of this row",
-            show: false
+            show: false,
         };
     }
 
@@ -35,13 +35,13 @@ class RowAccordian extends IgniteElement {
                 overflow: hidden;
             }
 
-            row-accordian > div.false > div {
+            row-accordian > div.hide > div {
                 transition: 1.5s;
                 margin-top: -100vh;
                 opacity: 0;
             }
 
-            row-accordian > div.true > div {
+            row-accordian > div > div {
                 margin-top: 0;
                 opacity: 1;
             }
@@ -57,7 +57,7 @@ class RowAccordian extends IgniteElement {
                     new div(
                         new slot(this)
                     )
-                ).class(this.show)
+                ).class(this.show, (value) => { return value ? null : "hide" })
             );
     }
 }
diff --git a/src/ignite-html/ignite-element.js b/src/ignite-html/ignite-element.js
index 2f3ed58..5abb61e 100644
--- a/src/ignite-html/ignite-element.js
+++ b/src/ignite-html/ignite-element.js
@@ -36,26 +36,28 @@ class IgniteElement extends HTMLElement {
     createProperties() {
         var props = this.properties;
 
-        var keys = Object.keys(props);
-        for (var i = 0; i < keys.length; i++) {
-            let prop = new IgniteProperty(props[keys[i]]);
-            this[`_${keys[i]}`] = prop;
+        if (props != null) {
+            var keys = Object.keys(props);
+            for (var i = 0; i < keys.length; i++) {
+                let prop = new IgniteProperty(props[keys[i]]);
+                this[`_${keys[i]}`] = prop;
 
-            ((propName) => {
-                Object.defineProperty(this, propName, {
-                    get: function () {
-                        if (IgniteRenderingContext.rendering == false) {
-                            return this[`_${propName}`].value;
-                        } else {
-                            return this[`_${propName}`];
+                ((propName) => {
+                    Object.defineProperty(this, propName, {
+                        get: function () {
+                            if (IgniteRenderingContext.rendering == false) {
+                                return this[`_${propName}`].value;
+                            } else {
+                                return this[`_${propName}`];
+                            }
+                        },
+
+                        set: function (value) {
+                            this[`_${propName}`].value = value;
                         }
-                    },
-
-                    set: function (value) {
-                        this[`_${propName}`].value = value;
-                    }
-                });
-            })(keys[i]);
+                    });
+                })(keys[i]);
+            }
         }
     }
 
@@ -66,9 +68,11 @@ class IgniteElement extends HTMLElement {
     resetProperties() {
         var props = this.properties;
 
-        var keys = Object.keys(props);
-        for (var i = 0; i < keys.length; i++) {
-            this[keys[i]] = props[keys[i]];
+        if (props != null) {
+            var keys = Object.keys(props);
+            for (var i = 0; i < keys.length; i++) {
+                this[keys[i]] = props[keys[i]];
+            }
         }
     }
 
diff --git a/src/ignite-html/ignite-template.js b/src/ignite-html/ignite-template.js
index 9d0c9a9..4884092 100644
--- a/src/ignite-html/ignite-template.js
+++ b/src/ignite-html/ignite-template.js
@@ -35,16 +35,14 @@ class IgniteTemplate {
     /**
      * Adds a single or series of classes to this template
      * to be added once this template is constructed.
-     * @param  {...any} items 
+     * @param {...any} items 
      */
-    class(...items) {
-        for (var i = 0; i < items.length; i++) {
-            if (items[i] instanceof IgniteProperty) {
-                this.callbacks.push(items[i].attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue)));
-                this.classes.push(items[i].value);
-            } else {
-                this.classes.push(items[i]);
-            }
+    class(name, converter = null) {
+        if (name instanceof IgniteProperty) {
+            this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue, converter)));
+            this.classes.push(converter != null ? converter(name.value) : name.value);
+        } else {
+            this.classes.push(converter != null ? converter(name) : name);
         }
 
         return this;
@@ -55,12 +53,12 @@ class IgniteTemplate {
      * @param {string} name 
      * @param {any} value 
      */
-    attribute(name, value) {
+    attribute(name, value, converter = null) {
         if (value instanceof IgniteProperty) {
-            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)));
-            this.attributes[name] = value.value;
+            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter)));
+            this.attributes[name] = converter != null ? converter(value.value) : value.value;
         } else {
-            this.attributes[name] = value;
+            this.attributes[name] = converter != null ? converter(value) : value;
         }
 
         return this;
@@ -212,12 +210,12 @@ class IgniteTemplate {
      * @param {String} value 
      * @param {Boolean} priority
      */
-    style(name, value, priority = null) {
+    style(name, value, priority = null, converter = null) {
         if (value instanceof IgniteProperty) {
-            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name)));
-            this.styles[name] = { name: name, value: value.value, priority: priority };
+            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name, converter)));
+            this.styles[name] = { name: name, value: (converter != null ? converter(value.value) : value.value), priority: priority };
         } else {
-            this.styles[name] = { name: name, value: value, priority: priority };
+            this.styles[name] = { name: name, value: (converter != null ? converter(value) : value), priority: priority };
         }
 
         return this;
@@ -257,7 +255,7 @@ class IgniteTemplate {
 
         //Set the classes on this element
         for (var i = 0; i < this.classes.length; i++) {
-            if (this.classes[i] !== null && this.classes[i] !== undefined) {
+            if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") {
                 this.element.classList.add(this.classes[i]);
             }
         }
@@ -360,7 +358,12 @@ class IgniteTemplate {
      * @param {any} oldValue 
      * @param {any} newValue 
      */
-    onClassChanged(oldValue, newValue) {
+    onClassChanged(oldValue, newValue, converter) {
+        if (converter !== null) {
+            oldValue = converter(oldValue);
+            newValue = converter(newValue);
+        }
+
         if (this.element) {
             if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") {
                 this.element.classList.remove(oldValue);
@@ -387,7 +390,11 @@ class IgniteTemplate {
      * @param {any} newValue 
      * @param {string} attributeName 
      */
-    onAttributeChanged(oldValue, newValue, attributeName) {
+    onAttributeChanged(oldValue, newValue, attributeName, converter) {
+        if (converter !== null) {
+            newValue = converter(newValue);
+        }
+
         if (this.element) {
             if (newValue == null || newValue == undefined) {
                 this.element.removeAttribute(attributeName);
@@ -463,11 +470,12 @@ class IgniteTemplate {
      * @param {any} newValue 
      * @param {any} style 
      */
-    onCssValueChanged(oldValue, newValue, name) {
+    onCssValueChanged(oldValue, newValue, name, converter) {
         if (this.element) {
-            this.element.style.setProperty(name, newValue, this.styles[name].priority);
-            this.styles[name].value = newValue;
+            this.element.style.setProperty(name, (converter != null ? converter(newValue) : newValue), this.styles[name].priority);
         }
+
+        this.styles[name].value = (converter != null ? converter(newValue) : newValue);
     }
 }