Make responsive stuff more flexible and enable for mobile-first

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.8.9",
+  "version": "0.8.13",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/device_manager/model/Device.js

@@ -6,7 +6,19 @@ module.exports = Backbone.Model.extend({
 
   defaults :{
     name: '',
+
+    // Width to set for the editor iframe
     width: '',
+
+    // The width which will be used in media queries,
+    // If empty the width will be used
+    widthMedia: null,
   },
 
+  initialize() {
+    if (this.get('widthMedia') == null) {
+      this.set('widthMedia', this.get('width'));
+    }
+  }
+
 });

src/editor/config/config.js

@@ -59,6 +59,10 @@ module.exports = {
   // When enabled, on device change media rules won't be created
   devicePreviewMode: 0,
 
+  // THe condition to use for media queries, eg. 'max-width'
+  // Comes handy for mobile-first cases
+  mediaCondition: 'max-width',
+
   // This option makes available custom component types also for loaded
   // elements inside canvas
   loadCompsOnRender: 1,
@@ -104,18 +108,21 @@ module.exports = {
 
   //Configurations for Device Manager
   deviceManager: {
-    'devices': [{
+    devices: [{
         name: 'Desktop',
         width: '',
       },{
         name: 'Tablet',
-        width: '992px',
+        width: '768px',
+        widthMedia: '992px',
       },{
         name: 'Mobile landscape',
-        width: '768px',
+        width: '568px',
+        widthMedia: '768px',
       },{
         name: 'Mobile portrait',
-        width: '480px',
+        width: '320px',
+        widthMedia: '480px',
     }],
   },
 

src/style_manager/view/SectorsView.js

@@ -33,22 +33,25 @@ module.exports = Backbone.View.extend({
    * @private
    */
   targetUpdated() {
-    var el = this.target.get('selectedComponent');
+    var em = this.target;
+    var el = em.get('selectedComponent');
 
     if(!el)
       return;
 
-    var previewMode = this.target.get('Config').devicePreviewMode;
+    const config = em.get('Config');
+    var previewMode = config.devicePreviewMode;
     var classes = el.get('classes');
     var pt = this.propTarget;
-    var device = this.target.getDeviceModel();
+    var device = em.getDeviceModel();
     var state = !previewMode ? el.get('state') : '';
-    var mediaText = device && !previewMode && device.get('width')?
+    var widthMedia = device && device.get('widthMedia');
-      '(max-width: ' + device.get('width') + ')' : '';
+    var mediaText = device && !previewMode && widthMedia ?
+      `(${config.mediaCondition}: ${widthMedia})` : '';
     pt.helper = null;
 
     if(classes.length){
-      var cssC = this.target.get('CssComposer');
+      var cssC = em.get('CssComposer');
       var valid = _.filter(classes.models, item => item.get('active'));
       var iContainer = cssC.get(valid, state, mediaText);
 
@@ -67,7 +70,7 @@ module.exports = Backbone.View.extend({
       // If the state is not empty, there should be a helper rule in play
       // The helper rule will get the same style of the iContainer
       if(state){
-        var clm = this.target.get('SelectorManager');
+        var clm = em.get('SelectorManager');
         var helperClass = clm.add('hc-state');
         var helperRule = cssC.get([helperClass]);
         if(!helperRule)