Use CSS instead of hardcoded styles

dist/jsoneditor.css

@@ -0,0 +1,71 @@
+.jse-modal{
+    background-color: white;
+    border: 1px solid black;
+    position: absolute;
+    z-index: 10;
+    box-shadow:3px 3px black;
+}
+.jse-disableHeader, .jse-disableLabel{
+    color:  #ccc;
+}
+.jse-CheckboxLabel{
+    font-weight: normal;
+}
+.jse-Checkbox{
+    display:inline-block;
+    width:auto;
+}
+.jse-MultiCheckboxLabel{
+    display:block;
+}
+.jse-MultiCheckboxControl{
+    display:      inline-block;
+    margin-right: 20px;
+}
+.jse-Switcher{
+    background-color:transparent;
+    height:auto;
+    font-style:italic;
+    font-weight:normal;
+    padding:0 0 0 3px;
+}
+.jse-TextareaInput{
+    width:100%;
+    height:300px;
+    box-sizing:border-box;
+}
+.jse-IndentedPanel{
+    padding-left:10px;
+    margin-left:10px;
+    border-left:1px solid #ccc;
+}
+.jse-Tab{
+    border: 1px solid #ccc;
+    borderWidth: 1px 0 1px 1px;
+    textAlign: center;
+    lineHeight: 30px;
+    borderRadius: 5px;
+    borderBottomRightRadius: 0;
+    borderTopRightRadius: 0;
+    fontWeight: bold;
+    cursor: pointer;
+}
+.jse-TabActive{
+    opacity: 1;
+    background: white;
+}
+.jse-TabInActive{
+    opacity:0.5;
+    background: none;
+}
+.jse-BlockLink{
+    display: block;
+}
+.jse-Media{
+    width:100%;
+}
+.jse-{
+}
+.jse-{
+}
+

dist/jsoneditor.js

@@ -5327,11 +5327,7 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   getModal: function() {
     var el = document.createElement('div');
-    el.style.backgroundColor = 'white';
-    el.style.border = '1px solid black';
-    el.style.boxShadow = '3px 3px black';
-    el.style.position = 'absolute';
-    el.style.zIndex = '10';
+    el.className = 'jse-modal';
     el.style.display = 'none';
     return el;
   },
@@ -5341,7 +5337,7 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   getGridRow: function() {
     var el = document.createElement('div');
-    el.className = 'row';
+    el.className = 'jse-row';
     return el;
   },
   getGridColumn: function() {
@@ -5358,16 +5354,16 @@ JSONEditor.AbstractTheme = Class.extend({
     return el;
   },
   disableHeader: function(header) {
-    header.style.color = '#ccc';
+    header.className = 'jse-disableHeader';
   },
   disableLabel: function(label) {
-    label.style.color = '#ccc';
+    label.className = 'jse-disableLabel';
   },
   enableHeader: function(header) {
-    header.style.color = '';
+    header.className = '';
   },
   enableLabel: function(label) {
-    label.style.color = '';
+    label.className = '';
   },
   getFormInputLabel: function(text) {
     var el = document.createElement('label');
@@ -5376,7 +5372,7 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   getCheckboxLabel: function(text) {
     var el = this.getFormInputLabel(text);
-    el.style.fontWeight = 'normal';
+    el.className = 'jse-CheckboxLabel';
     return el;
   },
   getHeader: function(text) {
@@ -5392,22 +5388,20 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   getCheckbox: function() {
     var el = this.getFormInputField('checkbox');
-    el.style.display = 'inline-block';
-    el.style.width = 'auto';
+    el.className = 'jse-Checkbox';
     return el;
   },
   getMultiCheckboxHolder: function(controls,label,description) {
     var el = document.createElement('div');
 
     if(label) {
-      label.style.display = 'block';
+      el.className = 'jse-MultiCheckboxLabel';
       el.appendChild(label);
     }
 
     for(var i in controls) {
       if(!controls.hasOwnProperty(i)) continue;
-      controls[i].style.display = 'inline-block';
-      controls[i].style.marginRight = '20px';
+      controls[i].className = 'jse-MultiCheckboxControl';
       el.appendChild(controls[i]);
     }
 
@@ -5422,11 +5416,7 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   getSwitcher: function(options) {
     var switcher = this.getSelectInput(options);
-    switcher.style.backgroundColor = 'transparent';
-    switcher.style.height = 'auto';
-    switcher.style.fontStyle = 'italic';
-    switcher.style.fontWeight = 'normal';
-    switcher.style.padding = '0 0 0 3px';
+    switcher.className = 'jse-Switcher';
     return switcher;
   },
   getSwitcherOptions: function(switcher) {
@@ -5447,10 +5437,7 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   getTextareaInput: function() {
     var el = document.createElement('textarea');
-    el.style = el.style || {};
-    el.style.width = '100%';
-    el.style.height = '300px';
-    el.style.boxSizing = 'border-box';
+    el.className = 'jse-TextareaInput';
     return el;
   },
   getRangeInput: function(min,max,step) {
@@ -5484,10 +5471,7 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   getIndentedPanel: function() {
     var el = document.createElement('div');
-    el.style = el.style || {};
-    el.style.paddingLeft = '10px';
-    el.style.marginLeft = '10px';
-    el.style.borderLeft = '1px solid #ccc';
+    el.className = 'jse-IndentedPanel';
     return el;
   },
   getChildEditorHolder: function() {
@@ -5593,18 +5577,7 @@ JSONEditor.AbstractTheme = Class.extend({
   getTab: function(span) {
     var el = document.createElement('div');
     el.appendChild(span);
-    el.style = el.style || {};
-    this.applyStyles(el,{
-      border: '1px solid #ccc',
-      borderWidth: '1px 0 1px 1px',
-      textAlign: 'center',
-      lineHeight: '30px',
-      borderRadius: '5px',
-      borderBottomRightRadius: 0,
-      borderTopRightRadius: 0,
-      fontWeight: 'bold',
-      cursor: 'pointer'
-    });
+    el.className = 'jse-Tab';
     return el;
   },
   getTabContentHolder: function(tab_holder) {
@@ -5614,23 +5587,19 @@ JSONEditor.AbstractTheme = Class.extend({
     return this.getIndentedPanel();
   },
   markTabActive: function(tab) {
-    this.applyStyles(tab,{
-      opacity: 1,
-      background: 'white'
-    });
+    tab.classList.add("TabActive");
+    tab.classList.remove("TabInActive");
   },
   markTabInactive: function(tab) {
-    this.applyStyles(tab,{
-      opacity:0.5,
-      background: ''
-    });
+    tab.classList.remove("TabActive");
+    tab.classList.add("TabInActive");
   },
   addTab: function(holder, tab) {
     holder.children[0].appendChild(tab);
   },
   getBlockLink: function() {
     var link = document.createElement('a');
-    link.style.display = 'block';
+    link.className = 'jse-BlockLink';
     return link;
   },
   getBlockLinkHolder: function() {
@@ -5643,7 +5612,7 @@ JSONEditor.AbstractTheme = Class.extend({
   },
   createMediaLink: function(holder,link,media) {
     holder.appendChild(link);
-    media.style.width='100%';
+    media.className = 'jse-Media';
     holder.appendChild(media);
   },
   createImageLink: function(holder,link,image) {

examples/advanced.html

@@ -5,6 +5,7 @@
     <title>Advanced JSON Editor Example</title>
 
     <script src="../dist/jsoneditor.js"></script>
+    <link rel='stylesheet' href="../dist/jsoneditor.css" href="styles.css">
   </head>
   <body>
     <h1>Advanced JSON Editor Example</h1>

examples/basic.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>Basic JSON Editor Example</title>
     <script src="../dist/jsoneditor.js"></script>
+    <link rel='stylesheet' href="../dist/jsoneditor.css" href="styles.css">
   </head>
   <body>
     <h1>Basic JSON Editor Example</h1>

examples/css_integration.html

@@ -10,6 +10,7 @@
     <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'>
 
     <script src="../dist/jsoneditor.js"></script>
+    <link rel='stylesheet' href="../dist/jsoneditor.css" href="styles.css">
 
     <script>
     // Set the default CSS theme and icon library globally

examples/recursive.html

@@ -16,6 +16,7 @@
     <script src='//cdn.jsdelivr.net/sceditor/1.4.3/plugins/xhtml.js'></script>
 
     <script src="../dist/jsoneditor.js"></script>
+    <link rel='stylesheet' href="../dist/jsoneditor.css" href="styles.css">
 </head>
 <body>
 <div class='container'>

examples/select2.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>JSON Editor Select2 Integration Example</title>
     <script src="../dist/jsoneditor.js"></script>
+    <link rel='stylesheet' href="../dist/jsoneditor.css" href="styles.css">
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="//cdn.jsdelivr.net/select2/3.4.8/select2.min.js"></script>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.8/select2.css">

examples/upload.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>JSON Editor Upload Example</title>
     <script src="../dist/jsoneditor.js"></script>
+    <link rel='stylesheet' href="../dist/jsoneditor.css" href="styles.css">
   </head>
   <body>
     <h1>JSON Editor Upload Example</h1>

examples/wysiwyg.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>JSON Editor WYSIWYG Example</title>
     <script src="../dist/jsoneditor.js"></script>
+    <link rel='stylesheet' href="../dist/jsoneditor.css" href="styles.css">
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="//cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.bbcode.min.js"></script>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.default.min.css">

package.json

@@ -27,11 +27,11 @@
     "node": ">= 0.8.0"
   },
   "devDependencies": {
-    "grunt-contrib-concat": "~0.3.0",
-    "grunt-contrib-uglify": "~0.2.0",
-    "grunt-contrib-watch": "~0.5.3",
+    "grunt": "~0.4.2",
+    "grunt-contrib-concat": "^0.5.0",
     "grunt-contrib-jshint": "^0.10.0",
-    "grunt": "~0.4.2"
+    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-watch": "~0.5.3"
   },
   "scripts": {
     "build": "npm install && grunt",