Remove html templates

9 years ago · 23816464b0
39 changed files with 169 additions and 271 deletions
--- a/package.json
+++ b/package.json
@ -11,7 +11,6 @@
    "url": "https://github.com/artf/grapesjs.git"
  },
  "dependencies": {
-    "amd-to-common": "^1.1.1",
    "backbone": "^1.3.3",
    "backbone-undo": "^0.2.5",
    "codemirror": "^5.21.0",
@ -20,10 +19,7 @@
    "jquery": "^3.1.1",
    "keymaster": "^1.6.2",
    "spectrum-colorpicker": "^1.8.0",
-    "text-loader": "^0.0.1",
-    "underscore": "^1.8.3",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
@ -36,13 +32,13 @@
    "jsdom": "^11.0.0",
    "mocha": "^3.1.2",
    "node-sass": "^3.4.2",
-    "requirejs": "^2.3.2",
-    "requirejs-text": "^2.0.12",
    "sinon": "^1.17.6",
    "svg2ttf": "^4.0.1",
    "ttf2eot": "^2.0.0",
    "ttf2woff": "^2.0.1",
-    "ttf2woff2": "^2.0.3"
+    "ttf2woff2": "^2.0.3",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
  },
  "keywords": [
    "wte",
--- a/src/code_manager/template/editor.html
+++ b/src/code_manager/template/editor.html
@ -1,4 +0,0 @@
-<div class="<%= pfx %>editor" id="<%= pfx %><%= codeName %>">
-	<div id="<%= pfx %>title"><%= label %></div>
-	<div id="<%= pfx %>code"></div> 
-</div>
--- a/src/code_manager/view/EditorView.js
+++ b/src/code_manager/view/EditorView.js
@ -1,9 +1,12 @@
 var Backbone = require('backbone');
-var vTemplate = require('text!./../template/editor.html');

 module.exports = Backbone.View.extend({

-  template: _.template(vTemplate),
+  template: _.template(`
+  <div class="<%= pfx %>editor" id="<%= pfx %><%= codeName %>">
+  	<div id="<%= pfx %>title"><%= label %></div>
+  	<div id="<%= pfx %>code"></div>
+  </div>`),

  initialize: function(o){
    this.config = o.config || {};
--- a/src/config/require-config.js
+++ b/src/config/require-config.js
@ -1,59 +0,0 @@
-require.config({
-	shim: {
-		underscore: {
-			exports: '_'
-		},
-		backbone: {
-			deps: [ 'underscore', 'jquery' ],
-			exports: 'Backbone'
-		},
-		rte: {
-			deps: [ 'jquery' ],
-			exports: 'rte'
-		},
-		backboneUndo: {
-			deps: ['backbone'],
-			exports: 'backboneUndo'
-		},
-		keymaster: {
-			exports: 'keymaster'
-		},
-	},
-
-	paths: {
-		jquery: 			'../node_modules/jquery/dist/jquery',
-		underscore: 	'../node_modules/underscore/underscore',
-		backbone: 		'../node_modules/backbone/backbone',
-		backboneUndo: '../node_modules/backbone-undo/Backbone.Undo',
-		keymaster:		'../node_modules/keymaster/keymaster',
-		text: 				'../node_modules/requirejs-text/text',
-		Spectrum: 		'../node_modules/spectrum-colorpicker/spectrum',
-		codemirror: 	'../node_modules/codemirror',
-		formatting: 	'../node_modules/codemirror-formatting/formatting',
-	},
-
-	packages : 	[
-								{  name: 'GrapesJS', 				location: 'grapesjs'					},
-								{  name: 'Abstract', 				location: 'domain_abstract'		},
-								{  name: 'Editor', 					location: 'editor', 					},
-		            {  name: 'AssetManager', 		location: 'asset_manager', 		},
-		            {  name: 'BlockManager', 		location: 'block_manager', 		},
-								{  name: 'TraitManager', 		location: 'trait_manager', 		},
-		            {  name: 'StyleManager', 		location: 'style_manager', 		},
-		            {  name: 'DeviceManager', 	location: 'device_manager', 	},
-		            {  name: 'StorageManager', 	location: 'storage_manager', 	},
-		            {  name: 'PluginManager',		location: 'plugin_manager',		},
-		            {  name: 'Navigator', 			location: 'navigator', 				},
-		            {  name: 'DomComponents', 	location: 'dom_components', 	},
-		            {  name: 'RichTextEditor', 	location: 'rich_text_editor', },
-		            {  name: 'SelectorManager', location: 'selector_manager', },
-		            {  name: 'ModalDialog', 		location: 'modal_dialog', 		},
-		            {  name: 'CodeManager', 		location: 'code_manager', 		},
-		            {  name: 'CssComposer',			location: 'css_composer',			},
-		            {  name: 'Commands',				location: 'commands',					},
-		            {  name: 'Canvas',					location: 'canvas',						},
-		            {  name: 'Panels',					location: 'panels',						},
-		            {  name: 'Parser',					location: 'parser',						},
-		            {  name: 'Utils', 					location: 'utils', 						}
-	]
-});
--- a/src/device_manager/template/devices.html
+++ b/src/device_manager/template/devices.html
@ -1,10 +0,0 @@
-<div class="<%= ppfx %>device-label"><%= deviceLabel %></div>
-<div class="<%= ppfx %>field <%= ppfx %>select">
-  <span id="<%= ppfx %>input-holder">
-    <select class="<%= ppfx %>devices"></select>
-  </span>
-  <div class="<%= ppfx %>sel-arrow">
-    <div class="<%= ppfx %>d-s-arrow"></div>
-  </div>
-</div>
-<button style="display:none" class="<%= ppfx %>add-trasp">+</button>
--- a/src/device_manager/view/DevicesView.js
+++ b/src/device_manager/view/DevicesView.js
@ -1,9 +1,18 @@
 var Backbone = require('backbone');
-var devicesTemplate = require('text!./../template/devices.html');

 module.exports = Backbone.View.extend({

-  template: _.template(devicesTemplate),
+  template: _.template(`
+    <div class="<%= ppfx %>device-label"><%= deviceLabel %></div>
+    <div class="<%= ppfx %>field <%= ppfx %>select">
+      <span id="<%= ppfx %>input-holder">
+        <select class="<%= ppfx %>devices"></select>
+      </span>
+      <div class="<%= ppfx %>sel-arrow">
+        <div class="<%= ppfx %>d-s-arrow"></div>
+      </div>
+    </div>
+    <button style="display:none" class="<%= ppfx %>add-trasp">+</button>`),

  events: {
    'change': 'updateDevice'
--- a/src/domain_abstract/ui/Input.js
+++ b/src/domain_abstract/ui/Input.js
@ -1,5 +1,4 @@
 var Backbone = require('backbone');
-var inputTemplate = require('text!./templates/input.html');

 module.exports = Backbone.View.extend({

@ -7,7 +6,7 @@ module.exports = Backbone.View.extend({
    'change': 'handleChange',
  },

-  template: _.template(inputTemplate),
+  template: _.template(`<span class='<%= holderClass %>'></span>`),

  initialize: function(opts) {
    var opt = opts || {};
--- a/src/domain_abstract/ui/InputColor.js
+++ b/src/domain_abstract/ui/InputColor.js
@ -1,11 +1,16 @@
 var Backbone = require('backbone');
 var Input = require('./Input');
 var Spectrum = require('Spectrum');
-var inputTemplate = require('text!./templates/inputColor.html');

 module.exports = Input.extend({

-  template: _.template(inputTemplate),
+  template: _.template(`
+  <div class='<%= ppfx %>input-holder'></div>
+  <div class="<%= ppfx %>field-colorp">
+    <div class="<%= ppfx %>field-colorp-c">
+      <div class="<%= ppfx %>checker-bg"></div>
+    </div>
+  </div>`),

  initialize: function(opts) {
    Input.prototype.initialize.apply(this, arguments);
--- a/src/domain_abstract/ui/InputNumber.js
+++ b/src/domain_abstract/ui/InputNumber.js
@ -1,11 +1,16 @@
 var Backbone = require('backbone');
-var inputTemplate = require('text!./templates/inputNumber.html');

 module.exports = Backbone.View.extend({

  events: {},

-  template: _.template(inputTemplate),
+  template: _.template(`
+  <span class='<%= ppfx %>input-holder'></span>
+  <span class='<%= ppfx %>field-units'></span>
+  <div class="<%= ppfx %>field-arrows">
+    <div class="<%= ppfx %>field-arrow-u"></div>
+    <div class="<%= ppfx %>field-arrow-d"></div>
+  </div>`),

  initialize: function(opts) {
    _.bindAll(this, 'moveIncrement', 'upIncrement');
--- a/src/domain_abstract/ui/templates/input.html
+++ b/src/domain_abstract/ui/templates/input.html
@ -1 +0,0 @@
-<span class='<%= holderClass %>'></span>
--- a/src/domain_abstract/ui/templates/inputColor.html
+++ b/src/domain_abstract/ui/templates/inputColor.html
@ -1,6 +0,0 @@
-<div class='<%= ppfx %>input-holder'></div>
-<div class="<%= ppfx %>field-colorp">
-	<div class="<%= ppfx %>field-colorp-c">
-		<div class="<%= ppfx %>checker-bg"></div>
-	</div>
-</div>
--- a/src/domain_abstract/ui/templates/inputNumber.html
+++ b/src/domain_abstract/ui/templates/inputNumber.html
@ -1,6 +0,0 @@
-<span class='<%= ppfx %>input-holder'></span>
-<span class='<%= ppfx %>field-units'></span>
-<div class="<%= ppfx %>field-arrows">
-	<div class="<%= ppfx %>field-arrow-u"></div>
-	<div class="<%= ppfx %>field-arrow-d"></div>
-</div>
--- a/src/modal_dialog/template/modal.html
+++ b/src/modal_dialog/template/modal.html
@ -1,12 +0,0 @@
-<div class="<%= pfx %>dialog">
-  <div class="<%= pfx %>header">
-    <div class="<%= pfx %>title"><%= title %></div>
-    <div class="<%= pfx %>btn-close">&Cross;</div>
-  </div>
-  <div class="<%= pfx %>content">
-    <div id="<%= pfx %>c"> <%= content %> </div>
-    <div style="clear:both"></div>
-  </div>
-</div>
-<div class="<%= pfx %>backlayer"></div>
-<div class="<%= pfx %>collector" style="display: none"></div>
--- a/src/modal_dialog/view/ModalView.js
+++ b/src/modal_dialog/view/ModalView.js
@ -1,8 +1,19 @@
 var Backbone = require('backbone');
-var modalTemplate = require('text!./../template/modal.html');
-module.exports = Backbone.View.extend({

-  template: _.template(modalTemplate),
+module.exports = Backbone.View.extend({
+  template: _.template(`
+    <div class="<%= pfx %>dialog">
+      <div class="<%= pfx %>header">
+        <div class="<%= pfx %>title"><%= title %></div>
+        <div class="<%= pfx %>btn-close">&Cross;</div>
+      </div>
+      <div class="<%= pfx %>content">
+        <div id="<%= pfx %>c"> <%= content %> </div>
+        <div style="clear:both"></div>
+      </div>
+    </div>
+    <div class="<%= pfx %>backlayer"></div>
+    <div class="<%= pfx %>collector" style="display: none"></div>`),

  events: {},

--- a/src/navigator/template/item.html
+++ b/src/navigator/template/item.html
@ -1,19 +0,0 @@
-<% if (hidable) { %>
-	<i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>"></i>
-<% } %>
-
-<div class="<%= prefix %>title-c">
-  <div class="<%= prefix %>title <%= addClass %>">
-  	<i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>"></i>
-		<i class="fa fa-pencil <%= editBtnCls %>"></i>
-		<input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>
-  </div>
-</div>
-
-<div id="<%= prefix %>counter"><%= (count ? count : '') %></div>
-
-<div id="<%= prefix %>move">
-	<i class="fa fa-arrows"></i>
-</div>
-
-<div class="<%= prefix %>children"></div>
--- a/src/navigator/view/ItemView.js
+++ b/src/navigator/view/ItemView.js
@ -1,10 +1,28 @@
 var Backbone = require('backbone');
-var ItemTemplate = require('text!./../template/item.html');
 var ItemsView;

 module.exports = Backbone.View.extend({

-  template: _.template(ItemTemplate),
+  template: _.template(`
+  <% if (hidable) { %>
+  	<i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>"></i>
+  <% } %>
+
+  <div class="<%= prefix %>title-c">
+    <div class="<%= prefix %>title <%= addClass %>">
+    	<i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>"></i>
+  		<i class="fa fa-pencil <%= editBtnCls %>"></i>
+  		<input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>
+    </div>
+  </div>
+
+  <div id="<%= prefix %>counter"><%= (count ? count : '') %></div>
+
+  <div id="<%= prefix %>move">
+  	<i class="fa fa-arrows"></i>
+  </div>
+
+  <div class="<%= prefix %>children"></div>`),

  initialize: function(o) {
    this.opt = o;
--- a/src/selector_manager/template/classTag.html
+++ b/src/selector_manager/template/classTag.html
@ -1,5 +0,0 @@
-<span id="<%= pfx %>checkbox" class="fa"></span>
- <span id="<%= pfx %>tag-label">
-    <input class="<%= ppfx %>no-app" value="<%= label %>" <%= inputProp %>/>
-  </span>
-<span id="<%= pfx %>close">&Cross;</span>
--- a/src/selector_manager/template/classTags.html
+++ b/src/selector_manager/template/classTags.html
@ -1,27 +0,0 @@
-<div id="<%= pfx %>up">
-  <div id="<%= pfx %>label"><%= label %></div>
-  <div id="<%= pfx %>status-c">
-    <span id="<%= pfx %>input-c">
-      <div class="<%= ppfx %>field <%= ppfx %>select">
-        <span id="<%= ppfx %>input-holder">
-          <select id="<%= pfx %>states">
-            <option value=""><%= statesLabel %></option>
-          </select>
-        </span>
-        <div class="<%= ppfx %>sel-arrow">
-          <div class="<%= ppfx %>d-s-arrow"></div>
-        </div>
-      </div>
-    </span>
-  </div>
-</div>
-<div id="<%= pfx %>tags-field" class="<%= ppfx %>field">
-  <div id="<%= pfx %>tags-c"></div>
-  <input id="<%= pfx %>new" />
-  <span id="<%= pfx %>add-tag" class="fa fa-plus"></span>
-</div>
-<div id="<%= pfx %>sel-help">
-  <div id="<%= pfx %>label">Selected</div>
-  <div id="<%= pfx %>sel"></div>
-  <div style="clear:both"></div>
-</div>
--- a/src/selector_manager/view/ClassTagView.js
+++ b/src/selector_manager/view/ClassTagView.js
@ -1,8 +1,12 @@
 var Backbone = require('backbone');
-var tagTemplate = require('text!./../template/classTag.html');
-module.exports = Backbone.View.extend({

-  template: _.template(tagTemplate),
+module.exports = Backbone.View.extend({
+  template: _.template(`
+  <span id="<%= pfx %>checkbox" class="fa"></span>
+  <span id="<%= pfx %>tag-label">
+      <input class="<%= ppfx %>no-app" value="<%= label %>" <%= inputProp %>/>
+  </span>
+  <span id="<%= pfx %>close">&Cross;</span>`),

  events: {},

--- a/src/selector_manager/view/ClassTagsView.js
+++ b/src/selector_manager/view/ClassTagsView.js
@ -1,10 +1,35 @@
 var Backbone = require('backbone');
-var tagsTemplate = require('text!./../template/classTags.html');
 var ClassTagView = require('./ClassTagView');

 module.exports = Backbone.View.extend({
-
-  template: _.template(tagsTemplate),
+  template: _.template(`
+  <div id="<%= pfx %>up">
+    <div id="<%= pfx %>label"><%= label %></div>
+    <div id="<%= pfx %>status-c">
+      <span id="<%= pfx %>input-c">
+        <div class="<%= ppfx %>field <%= ppfx %>select">
+          <span id="<%= ppfx %>input-holder">
+            <select id="<%= pfx %>states">
+              <option value=""><%= statesLabel %></option>
+            </select>
+          </span>
+          <div class="<%= ppfx %>sel-arrow">
+            <div class="<%= ppfx %>d-s-arrow"></div>
+          </div>
+        </div>
+      </span>
+    </div>
+  </div>
+  <div id="<%= pfx %>tags-field" class="<%= ppfx %>field">
+    <div id="<%= pfx %>tags-c"></div>
+    <input id="<%= pfx %>new" />
+    <span id="<%= pfx %>add-tag" class="fa fa-plus"></span>
+  </div>
+  <div id="<%= pfx %>sel-help">
+    <div id="<%= pfx %>label">Selected</div>
+    <div id="<%= pfx %>sel"></div>
+    <div style="clear:both"></div>
+  </div>`),

  events: {},

--- a/src/style_manager/templates/layer.html
+++ b/src/style_manager/templates/layer.html
@ -1,10 +0,0 @@
-<div id="<%= pfx %>move">
-  <i class="fa fa-arrows"></i>
-</div>
-<div id="<%= pfx %>label"><%= label %></div>
-<div id="<%= pfx %>preview-box">
-	<div id="<%= pfx %>preview"></div>
-</div>
-<div id="<%= pfx %>close-layer" class="<%= pfx %>btn-close">&Cross;</div>
-<div id="<%= pfx %>inputs"></div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/propertyColor.html
+++ b/src/style_manager/templates/propertyColor.html
@ -1,9 +0,0 @@
-<div class="<%= ppfx %>field <%= ppfx %>field-color">
-	<div id='<%= pfx %>input-holder'></div>
-  <div class="<%= ppfx %>field-colorp">
-		<div class="<%= ppfx %>field-colorp-c">
-			<div class="<%= ppfx %>checker-bg"></div>
-		</div>
-  </div>
-</div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/propertyComposite.html
+++ b/src/style_manager/templates/propertyComposite.html
@ -1,4 +0,0 @@
-<div class="<%= pfx %>field <%= pfx %>composite">
-	<span id='<%= pfx %>input-holder'></span>
-</div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/propertyFile.html
+++ b/src/style_manager/templates/propertyFile.html
@ -1,13 +0,0 @@
-<div class="<%= pfx %>field <%= pfx %>file">
-	<div id='<%= pfx %>input-holder'>
-		<div class="<%= pfx %>btn-c">
-			<button class="<%= pfx %>btn" id="<%= pfx %>images" type="button"><%= assets %></button>
-		</div>
-		<div style="clear:both;"></div>
-	</div>
-	<div id="<%= pfx %>preview-box">
-		<div id="<%= pfx %>preview-file"></div>
-		<div id="<%= pfx %>close">&Cross;</div>
-	</div>
-</div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/propertyInput.html
+++ b/src/style_manager/templates/propertyInput.html
@ -1,4 +0,0 @@
-<div class="<%= ppfx %>field">
-	<span id='<%= pfx %>input-holder'></span>
-</div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/propertyInteger.html
+++ b/src/style_manager/templates/propertyInteger.html
@ -1,8 +0,0 @@
-<div class="<%= ppfx %>field">
-	<span id='<%= pfx %>input-holder'></span>
-	<span class='<%= ppfx %>field-units'></span>
-	<div class="<%= ppfx %>field-arrows">
-		<div class="<%= ppfx %>field-arrow-u"></div>
-		<div class="<%= ppfx %>field-arrow-d"></div>
-	</div>
-</div>
--- a/src/style_manager/templates/propertyLabel.html
+++ b/src/style_manager/templates/propertyLabel.html
@ -1,5 +0,0 @@
-<div class="<%= pfx %>label">
-	<div class="<%= pfx %>icon <%= icon %>" title="<%= info %>">
-		<%= label %>
-	</div>
-</div>
--- a/src/style_manager/templates/propertyRadio.html
+++ b/src/style_manager/templates/propertyRadio.html
@ -1,4 +0,0 @@
-<div class="<%= ppfx %>field <%= ppfx %>field-radio">
-	<span id='<%= pfx %>input-holder'></span>
-</div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/propertySelect.html
+++ b/src/style_manager/templates/propertySelect.html
@ -1,7 +0,0 @@
-<div class="<%= ppfx %>field <%= ppfx %>select">
-	<span id='<%= pfx %>input-holder'></span>
-	<div class="<%= ppfx %>sel-arrow">
-		<div class="<%= ppfx %>d-s-arrow"></div>
-	</div>
-</div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/propertyStack.html
+++ b/src/style_manager/templates/propertyStack.html
@ -1,5 +0,0 @@
-<div class="<%= pfx %>field <%= pfx %>stack">
-	<button id='<%= pfx %>add'>+</button>
-	<span id='<%= pfx %>input-holder'></span>
-</div>
-<div style="clear:both"></div>
--- a/src/style_manager/templates/sector.html
+++ b/src/style_manager/templates/sector.html
@ -1,4 +0,0 @@
-<div class="<%= pfx %>title">
-  <i id="<%= pfx %>caret" class="fa"></i>
-  <%= label %>
-</div>
--- a/src/style_manager/view/LayerView.js
+++ b/src/style_manager/view/LayerView.js
@ -1,5 +1,4 @@
 var Backbone = require('backbone');
-var layerTemplate = require('text!./../templates/layer.html');

 module.exports = Backbone.View.extend({

@ -7,7 +6,17 @@ module.exports = Backbone.View.extend({
    'click': 'updateIndex',
  },

-  template: _.template(layerTemplate),
+  template: _.template(`
+  <div id="<%= pfx %>move">
+    <i class="fa fa-arrows"></i>
+  </div>
+  <div id="<%= pfx %>label"><%= label %></div>
+  <div id="<%= pfx %>preview-box">
+  	<div id="<%= pfx %>preview"></div>
+  </div>
+  <div id="<%= pfx %>close-layer" class="<%= pfx %>btn-close">&Cross;</div>
+  <div id="<%= pfx %>inputs"></div>
+  <div style="clear:both"></div>`),

  initialize: function(o) {
    this.stackModel = o.stackModel || {};
--- a/src/style_manager/view/PropertyCompositeView.js
+++ b/src/style_manager/view/PropertyCompositeView.js
@ -1,10 +1,13 @@
 var Backbone = require('backbone');
 var PropertyView = require('./PropertyView');
-var propertyTemplate = require('text!./../templates/propertyComposite.html');

 module.exports = PropertyView.extend({

-  template: _.template(propertyTemplate),
+  template: _.template(`
+  <div class="<%= pfx %>field <%= pfx %>composite">
+  	<span id='<%= pfx %>input-holder'></span>
+  </div>
+  <div style="clear:both"></div>`),

  initialize: function(o) {
    PropertyView.prototype.initialize.apply(this, arguments);
--- a/src/style_manager/view/PropertyFileView.js
+++ b/src/style_manager/view/PropertyFileView.js
@ -1,10 +1,20 @@
 var Backbone = require('backbone');
 var PropertyView = require('./PropertyView');
-var propertyTemplate = require('text!./../templates/propertyFile.html');

 module.exports = PropertyView.extend({
-
-  template: _.template(propertyTemplate),
+  template: _.template(`<div class="<%= pfx %>field <%= pfx %>file">
+    <div id='<%= pfx %>input-holder'>
+      <div class="<%= pfx %>btn-c">
+        <button class="<%= pfx %>btn" id="<%= pfx %>images" type="button"><%= assets %></button>
+      </div>
+      <div style="clear:both;"></div>
+    </div>
+    <div id="<%= pfx %>preview-box">
+      <div id="<%= pfx %>preview-file"></div>
+      <div id="<%= pfx %>close">&Cross;</div>
+    </div>
+  </div>
+  <div style="clear:both"></div>`),

  initialize: function(options) {
    PropertyView.prototype.initialize.apply(this, arguments);
--- a/src/style_manager/view/PropertyRadioView.js
+++ b/src/style_manager/view/PropertyRadioView.js
@ -1,10 +1,13 @@
 var Backbone = require('backbone');
 var PropertyView = require('./PropertyView');
-var propertyTemplate = require('text!./../templates/propertyRadio.html');

 module.exports = PropertyView.extend({

-  template: _.template(propertyTemplate),
+  template: _.template(`
+  <div class="<%= ppfx %>field <%= ppfx %>field-radio">
+    <span id='<%= pfx %>input-holder'></span>
+  </div>
+  <div style="clear:both"></div>`),

  initialize: function(options) {
    PropertyView.prototype.initialize.apply(this, arguments);
--- a/src/style_manager/view/PropertySelectView.js
+++ b/src/style_manager/view/PropertySelectView.js
@ -1,10 +1,16 @@
 var Backbone = require('backbone');
 var PropertyView = require('./PropertyView');
-var propertyTemplate = require('text!./../templates/propertySelect.html');

 module.exports = PropertyView.extend({

-  template: _.template(propertyTemplate),
+  template: _.template(`
+  <div class="<%= ppfx %>field <%= ppfx %>select">
+    <span id='<%= pfx %>input-holder'></span>
+    <div class="<%= ppfx %>sel-arrow">
+      <div class="<%= ppfx %>d-s-arrow"></div>
+    </div>
+  </div>
+  <div style="clear:both"></div>`),

  initialize: function(options) {
    PropertyView.prototype.initialize.apply(this, arguments);
--- a/src/style_manager/view/PropertyStackView.js
+++ b/src/style_manager/view/PropertyStackView.js
@ -1,12 +1,16 @@
 var Backbone = require('backbone');
 var PropertyCompositeView = require('./PropertyCompositeView');
-var propertyTemplate = require('text!./../templates/propertyStack.html');
 var Layers = require('./../model/Layers');
 var LayersView = require('./LayersView');

 module.exports = PropertyCompositeView.extend({

-  template: _.template(propertyTemplate),
+  template: _.template(`
+  <div class="<%= pfx %>field <%= pfx %>stack">
+    <button id='<%= pfx %>add'>+</button>
+    <span id='<%= pfx %>input-holder'></span>
+  </div>
+  <div style="clear:both"></div>`),

  initialize: function(o) {
    PropertyCompositeView.prototype.initialize.apply(this, arguments);
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@ -1,11 +1,18 @@
 var Backbone = require('backbone');
-var propertyLabel = require('text!./../templates/propertyLabel.html');
-var propertyTemplate = require('text!./../templates/propertyInput.html');

 module.exports = Backbone.View.extend({
-
-  template: _.template(propertyTemplate),
-  templateLabel: _.template(propertyLabel),
+  template: _.template(`
+  <div class="<%= ppfx %>field">
+    <span id='<%= pfx %>input-holder'></span>
+  </div>
+  <div style="clear:both"></div>`),
+
+  templateLabel: _.template(`
+  <div class="<%= pfx %>label">
+    <div class="<%= pfx %>icon <%= icon %>" title="<%= info %>">
+      <%= label %>
+    </div>
+  </div>`),

  events: {'change': 'valueUpdated'},

--- a/src/style_manager/view/SectorView.js
+++ b/src/style_manager/view/SectorView.js
@ -1,10 +1,13 @@
 var Backbone = require('backbone');
 var PropertiesView = require('./PropertiesView');
-var sectorTemplate = require('text!./../templates/sector.html');

 module.exports = Backbone.View.extend({

-  template: _.template(sectorTemplate),
+  template: _.template(`
+  <div class="<%= pfx %>title">
+    <i id="<%= pfx %>caret" class="fa"></i>
+    <%= label %>
+  </div>`),

  events:{},