@themarioga/grid-editor 4.0.0 → 5.0.0

package/src/js/jquery.grideditor.js

@@ -28,10 +28,13 @@ var METHODS = {
     createRow:        { value: true },
     createColumn:     { value: true },
     createElement:    { value: true },
+    createSection:    { value: true },
     createContainer:  { value: true },
     addTab:           { value: true },
     addAccordionItem: { value: true },
     setLocale:        {},
+    getUtility:       { value: true },
+    setUtility:       { value: true },
 };
 
 /**
@@ -45,20 +48,23 @@ var PLACEMENTS = ['appendTo', 'prependTo', 'insertAfter', 'insertBefore'];
  * runs in: a size written for a tier applies to every wider tier that does not
  * override it. Every size and offset class grid-editor reads or writes comes
  * from this table, so adding a tier is a row here and nothing else.
+ *
+ * `infix` is what Bootstrap's utility classes put between the property and
+ * the value - `order-md-2`, `d-none` - and is empty for the smallest tier.
  */
 var BREAKPOINTS = [
-    { key: 'xs', colPrefix: 'col-', offsetPrefix: 'offset-', min: 0, preview: 400, labelKey: 'view.xs' },
-    { key: 'sm', colPrefix: 'col-sm-', offsetPrefix: 'offset-sm-', min: 576, preview: 576, labelKey: 'view.sm' },
-    { key: 'md', colPrefix: 'col-md-', offsetPrefix: 'offset-md-', min: 768, preview: 768, labelKey: 'view.md' },
-    { key: 'lg', colPrefix: 'col-lg-', offsetPrefix: 'offset-lg-', min: 992, preview: 992, labelKey: 'view.lg' },
-    { key: 'xl', colPrefix: 'col-xl-', offsetPrefix: 'offset-xl-', min: 1200, preview: 1200, labelKey: 'view.xl' },
-    { key: 'xxl', colPrefix: 'col-xxl-', offsetPrefix: 'offset-xxl-', min: 1400, preview: null, labelKey: 'view.xxl' },
+    { key: 'xs', infix: '', colPrefix: 'col-', offsetPrefix: 'offset-', min: 0, preview: 400, labelKey: 'view.xs' },
+    { key: 'sm', infix: 'sm', colPrefix: 'col-sm-', offsetPrefix: 'offset-sm-', min: 576, preview: 576, labelKey: 'view.sm' },
+    { key: 'md', infix: 'md', colPrefix: 'col-md-', offsetPrefix: 'offset-md-', min: 768, preview: 768, labelKey: 'view.md' },
+    { key: 'lg', infix: 'lg', colPrefix: 'col-lg-', offsetPrefix: 'offset-lg-', min: 992, preview: 992, labelKey: 'view.lg' },
+    { key: 'xl', infix: 'xl', colPrefix: 'col-xl-', offsetPrefix: 'offset-xl-', min: 1200, preview: 1200, labelKey: 'view.xl' },
+    { key: 'xxl', infix: 'xxl', colPrefix: 'col-xxl-', offsetPrefix: 'offset-xxl-', min: 1400, preview: null, labelKey: 'view.xxl' },
 ];
 
 /**
  * The view that edits every tier at once. It is the default, and the one most
- * pages want: a layout that needs no per-device tuning is written once and
- * lands on all six prefixes.
+ * pages want: a layout that needs no per-device tuning is written once, as the
+ * class with no breakpoint, and applies at every size.
  */
 var ALL_VIEW = 'all';
 var ALL_VIEW_LABEL_KEY = 'view.all';
@@ -72,6 +78,31 @@ var LEGACY_VIEW_INDEXES = ['lg', 'sm', 'xs'];
 var MAX_COL_SIZE = 12;
 var MAX_COL_OFFSET = 11;
 
+/**
+ * The two sizes that are not a number of units: `equal` is Bootstrap's col,
+ * which shares what the row has left with the other equal columns, and
+ * `auto` is col-auto, as wide as its content.
+ */
+var FLEX_SIZES = ['equal', 'auto'];
+
+/** How many columns a row-cols class puts on a line. */
+var ROW_COLS_VALUES = ['1', '2', '3', '4', '5', '6', 'auto'];
+
+function rowColsClass(tier, value) {
+    return 'row-cols' + (tier.infix ? '-' + tier.infix : '') + '-' + value;
+}
+
+function isUnits(size) {
+    return typeof size === 'number';
+}
+
+/** The class that gives a column `size` at one tier: col-md-4, col-md, col-md-auto. */
+function sizeClass(tier, size) {
+    if (size === 'equal') { return tier.infix ? 'col-' + tier.infix : 'col'; }
+
+    return tier.colPrefix + size;
+}
+
 function breakpoint(key) {
     for (var i = 0; i < BREAKPOINTS.length; i++) {
         if (BREAKPOINTS[i].key === key) { return BREAKPOINTS[i]; }
@@ -79,9 +110,12 @@ function breakpoint(key) {
     return null;
 }
 
-/** The tiers a view writes to: one, or all six in the all view. */
+/**
+ * The tier a view writes to. The all view writes the base class, the one
+ * with no breakpoint, and takes the others off.
+ */
 function tiersFor(view) {
-    if (view === ALL_VIEW) { return BREAKPOINTS.slice(); }
+    if (view === ALL_VIEW) { return [BREAKPOINTS[0]]; }
 
     var tier = breakpoint(view);
     return tier ? [tier] : [];
@@ -258,11 +292,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             'container_tools'   : [], // Host tools on container drawers
             'tab_tools'         : [], // Host tools on tab drawers
             'accordion_tools'   : [], // Host tools on accordion item drawers
-            'plugins'           : null, // Container plugins to use; null means every one loaded
+            'plugins'           : null, // Plugins to use, of any kind; null means every one loaded
+            'row_cols'          : true, // A row's "columns per row" field, row-cols-*
+            'utilities'         : {}, // Options for the utility plugins, by plugin name
             'elements'          : NESTED_SETTINGS.elements, // Element level controls, below the column
             'custom_filter'     : '',
             'content_types'     : ['tinymce'],
-            'valid_col_sizes'   : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            'valid_col_sizes'   : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'equal', 'auto'],
             'valid_col_offsets' : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
             'add_column'        : NESTED_SETTINGS.add_column, // The add column tool
             'layout_modes'      : VIEW_KEYS.slice(), // Which views the dropdown offers
@@ -574,54 +610,91 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * Resize a column through the events, writing the tiers the current
-         * view covers: one in a per-breakpoint view, all six in the all view.
+         * What resizing this column to `size` in `view` would write, or null
+         * when the budget refuses it or there is nothing to change.
          *
-         * The budget is checked per tier and the whole change is refused if
-         * any tier has no room, so a resize never half lands.
-         */
-        /**
-         * What resizing this column to `size` would write, or null when the
-         * budget refuses it or there is nothing to change.
+         * A breakpoint view writes its own tier. The all view writes the base
+         * class and takes the size off every other tier, so one size is what
+         * applies everywhere; the plan says what it took off.
          *
          * Refused rather than quietly clamped: the offset is something the
-         * user set, and a tool that rewrites it is a tool that lies. The plan
-         * covers every tier the view writes, so a resize never half lands.
+         * user set, and a tool that rewrites it is a tool that lies. In the
+         * all view the base size has to fit every tier's offset, since it is
+         * the size at every tier once the others are gone.
          */
-        function planSize(col, size) {
-            var tiers = tiersFor(curView);
-            var wanted = tiers.map(function(tier) {
-                return clamp({ size: size, offset: getEffectiveOffset(col, tier) || 0 });
+        function planSize(col, size, view) {
+            view = view || curView;
+
+            if (view !== ALL_VIEW) {
+                var tier = breakpoint(view);
+                var wanted = clamp({ size: size, offset: getEffectiveOffset(col, tier) || 0 });
+
+                if (wanted.refused || getSize(col, tier) === wanted.size) { return null; }
+
+                return { writes: [{ tier: tier, size: wanted.size }], cleared: null, size: wanted.size };
+            }
+
+            var refused = BREAKPOINTS.some(function(each) {
+                return clamp({ size: size, offset: getEffectiveOffset(col, each) || 0 }).refused;
             });
+            if (refused) { return null; }
+
+            var base = BREAKPOINTS[0];
+            var writes = [];
+            var cleared = [];
 
-            if (wanted.some(function(request) { return request.refused; })) { return null; }
+            BREAKPOINTS.slice(1).forEach(function(each) {
+                var own = getSize(col, each);
+                if (own === null) { return; }
 
-            var unchanged = tiers.every(function(tier, i) {
-                return getSize(col, tier) === wanted[i].size;
+                writes.push({ tier: each, size: null });
+                cleared.push({ breakpoint: each.key, value: own });
             });
-            if (unchanged) { return null; }
 
-            return { tiers: tiers, sizes: wanted, size: wanted[0].size };
+            if (getSize(col, base) !== size) { writes.unshift({ tier: base, size: size }); }
+
+            return writes.length ? { writes: writes, cleared: cleared, size: size } : null;
         }
 
         function writeSize(col, plan) {
-            plan.tiers.forEach(function(tier, i) { setSize(col, tier, plan.sizes[i].size); });
+            plan.writes.forEach(function(write) { setSize(col, write.tier, write.size); });
             stripPixelWidths(col);
         }
 
-        /** Resize a column from a tool, announcing it either side. */
-        function resizeColumn(col, size, source) {
+        /** The all view's payloads say what the write took off the breakpoints. */
+        function withCleared(extra, cleared) {
+            if (cleared) { extra.cleared = cleared; }
+            return extra;
+        }
+
+        /**
+         * Resize a column, announcing it either side. `size` is units,
+         * `equal` or `auto`; `view` is the current one unless the size field
+         * of a plugin's panel says otherwise.
+         */
+        function resizeColumn(col, size, source, view) {
+            view = view || curView;
+
             var from = currentSize(col);
-            var plan = planSize(col, size);
+            var plan = planSize(col, size, view);
 
             if (!plan) { return false; }
 
             return operate(function() {
-                var payload = payloadFor('column', col, { source: source, from: from, to: plan.size });
+                var payload = payloadFor('column', col, withCleared({
+                    source: source,
+                    breakpoint: view,
+                    from: from,
+                    to: plan.size,
+                }, plan.cleared));
 
-                if (!emit('before-resize', payload)) { return false; }
+                if (!emit('before-resize', payload)) {
+                    refreshUtilities(col);
+                    return false;
+                }
 
                 writeSize(col, plan);
+                refreshUtilities(col);
                 emit('after-resize', payload);
 
                 return true;
@@ -631,41 +704,49 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         /**
          * Indent a column, shrinking it when the budget needs it: the offset
          * is what the user asked for, so it is the one that gets its way.
+         *
+         * Like a size, an offset is written to the tier being edited, or in
+         * the all view as the base class with every other tier's taken off.
          */
         function indentColumn(col, offset, source) {
-            var tiers = tiersFor(curView);
+            var everywhere = curView === ALL_VIEW;
+            var tier = everywhere ? BREAKPOINTS[0] : breakpoint(curView);
             var from = currentOffset(col);
 
             offset = Math.min(Math.max(offset, 0), MAX_COL_OFFSET);
 
-            var unchanged = tiers.every(function(tier) {
-                return (getOffset(col, tier) || 0) === offset;
-            });
-            if (unchanged) { return false; }
+            var others = everywhere ? BREAKPOINTS.slice(1).filter(function(each) {
+                return getOffset(col, each) !== null;
+            }) : [];
+
+            if ((getOffset(col, tier) || 0) === offset && !others.length) { return false; }
 
             return operate(function() {
-                var payload = payloadFor('column', col, {
+                var payload = payloadFor('column', col, withCleared({
                     source: source,
                     from: from,
                     to: offset,
-                });
+                }, everywhere ? others.map(function(each) {
+                    return { breakpoint: each.key, value: getOffset(col, each) };
+                }) : null));
 
                 if (!emit('before-indent', payload)) { return false; }
 
-                tiers.forEach(function(tier) {
-                    var was = getEffectiveSize(col, tier);
-                    var wanted = clamp({ size: was, offset: offset, leading: 'offset' });
+                setOffset(col, tier, offset);
+                others.forEach(function(each) { setOffset(col, each, 0); });
 
-                    setOffset(col, tier, wanted.offset);
+                // Wherever the column's size and the new offset no longer fit
+                // - one tier, or every tier in the all view - the size gives
+                // way, at that tier only. An equal or auto column fits anywhere.
+                (everywhere ? BREAKPOINTS : [tier]).forEach(function(each) {
+                    var was = getEffectiveSize(col, each);
+                    if (!isUnits(was)) { return; }
 
-                    // Only where the budget actually forced the column to give
-                    // way; otherwise an indent would write size classes for
-                    // tiers nobody asked it to touch
-                    if (wanted.size !== null && wanted.size !== was) {
-                        setSize(col, tier, wanted.size);
-                    }
+                    var wanted = clamp({ size: was, offset: offset, leading: 'offset' });
+                    if (wanted.size !== was) { setSize(col, each, wanted.size); }
                 });
 
+                refreshUtilities(col);
                 emit('after-indent', payload);
 
                 return true;
@@ -748,6 +829,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // when their editor is ready, and the drawers go back in.
             canvas.on('ge-rte-ready', '.ge-content', function() {
                 plugins('onContentReady', $(this));
+                refreshPreviews($(this));
             });
         }
 
@@ -763,17 +845,17 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             addRowGroup = $('<div class="ge-addRowGroup btn-group" />').appendTo(wrapper);
             addContainerGroup = $('<div class="ge-addContainerGroup btn-group" />');
             $.each(settings.new_row_layouts, function(j, layout) {
+                var grouped = !Array.isArray(layout);
                 var btn = $('<a class="btn btn-sm btn-primary" />')
-                    .attr('title', t('row.add', { layout: layout.join('-') }))
+                    .attr('title', grouped
+                        ? t('row.add_row_cols', { columns: layout.columns, counts: rowColsText(layout.row_cols) })
+                        : t('row.add', { layout: layout.join('-') }))
                     // What this button makes, in the markup rather than in
                     // jQuery data: a drag works on a clone of it
                     .attr('data-ge-toolbar', 'row')
-                    .attr('data-ge-layout', layout.join(','))
+                    .attr('data-ge-layout', grouped ? JSON.stringify(layout) : layout.join(','))
                     .on('click', function() {
-                        var row = createRow();
-                        layout.forEach(function(i) {
-                            createColumn(i).appendTo(row);
-                        });
+                        var row = rowFromLayoutValue(layout);
 
                         var added = addNode('row', row, function() {
                             row.appendTo(canvas);
@@ -788,10 +870,14 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
                 btn.append('<i class="bi bi-plus"></i>');
 
-                var layoutName = layout.join(' - ');
+                // A row of columns shares out the icon as they share the row;
+                // a row with row-cols draws one line of its widest count
+                var sizes = grouped ? rowColsIcon(layout) : layout;
                 var icon = '<div class="row ge-row-icon">';
-                layout.forEach(function(i) {
-                    icon += '<div class="column col-' + i + '"/>';
+                sizes.forEach(function(size) {
+                    // Closed explicitly: jQuery 4 no longer expands <div/>, and
+                    // each column would be parsed inside the one before
+                    icon += '<div class="column ' + sizeClass(BREAKPOINTS[0], size) + '"></div>';
                 });
                 icon += '</div>';
                 btn.append(icon);
@@ -823,6 +909,29 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 ;
             });
 
+            // A feature plugin's own buttons, beside the containers': what
+            // one makes goes onto the canvas, where the plugin says it belongs
+            $.each(FEATURES, function(name, feature) {
+                (feature.toolbar || []).forEach(function(item, index) {
+                    $('<a class="btn btn-sm btn-primary ge-add-container ge-add-feature" />')
+                        .attr('title', t(item.labelKey))
+                        .attr('data-ge-toolbar', 'feature')
+                        .attr('data-ge-feature', name)
+                        .attr('data-ge-item', index)
+                        .append('<i class="bi bi-plus"></i>')
+                        .append($('<span />').text(t(item.labelKey)))
+                        .on('click', function() {
+                            var made = item.create();
+
+                            addNode(item.kind, made, function() {
+                                made.appendTo(canvas);
+                            }, { parent: canvas, source: 'tool' });
+                        })
+                        .appendTo(addContainerGroup)
+                    ;
+                });
+            });
+
             // Buttons on right
             layoutDropdown = $('<div class="dropdown pull-right ge-layout-mode">' +
                 '<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown"></button>' +
@@ -998,14 +1107,14 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             if (!under) { return null; }
 
-            var region = $(under).closest('.column, .ge-canvas');
+            var region = $(under).closest(['.column', '.ge-canvas'].concat(pluginHooks('regions')).join(', '));
             if (!region.length || (region[0] !== canvas[0] && !canvas[0].contains(region[0]))) {
                 return null;
             }
 
             var before = null;
 
-            region.children('.row, .ge-content, [data-ge-container]').each(function() {
+            region.children(blockSelector()).each(function() {
                 if (before) { return; }
 
                 var box = this.getBoundingClientRect();
@@ -1015,6 +1124,30 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return { region: region, before: before };
         }
 
+        /**
+         * A feature's toolbar button dropped on the canvas. A region that will
+         * not have what it makes - a section dropped on a column - gives way
+         * to the canvas, just after the top level block the pointer was in.
+         */
+        function insertFeatureFromToolbar(button, where) {
+            var item = FEATURES[button.attr('data-ge-feature')].toolbar[parseInt(button.attr('data-ge-item'), 10)];
+            var made = item.create();
+
+            if (!acceptsBlock(where.region, made)) {
+                var top = where.region.parentsUntil(canvas).addBack().first();
+                where = { region: canvas, before: top.length ? top.next() : null };
+                if (where.before && !where.before.length) { where.before = null; }
+            }
+
+            return addNode(item.kind, made, function() {
+                if (where.before) {
+                    made.insertBefore(where.before);
+                } else {
+                    made.appendTo(where.region);
+                }
+            }, { parent: where.region, source: 'dragdrop' });
+        }
+
         /** A line where the block would go, following the pointer. */
         function showDropMarker(pageX, pageY) {
             var where = dropPlaceAt(pageX, pageY);
@@ -1041,6 +1174,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * the pointer left it.
          */
         function insertFromToolbar(button, where) {
+            if (button.attr('data-ge-toolbar') === 'feature') {
+                return insertFeatureFromToolbar(button, where);
+            }
+
             var container = button.attr('data-ge-toolbar') === 'container';
             var type = button.attr('data-ge-container-type');
             var made = container
@@ -1065,16 +1202,94 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             }, { parent: where.region, source: 'dragdrop' });
         }
 
+        /**
+         * The column width as a utility family, so the Responsive section of
+         * a column's panel has a field for it: every size, units or not, in
+         * the view being edited. A write is a resize, through the resize
+         * events, not a utility change.
+         */
+        function widthFamily() {
+            var values = [];
+            for (var units = 1; units <= MAX_COL_SIZE; units++) { values.push(String(units)); }
+
+            return {
+                name: 'col',
+                values: values.concat(FLEX_SIZES),
+                appliesTo: ['column'],
+                labelKey: 'utility.col_width',
+                className: function(key, value) { return sizeClass(breakpoint(key), parseSize(value)); },
+                choices: function() { return settings.valid_col_sizes.map(String); },
+                label: function(value) {
+                    if (value === 'equal') { return t('utility.col_equal'); }
+                    if (value === 'auto') { return t('utility.col_auto'); }
+
+                    return value;
+                },
+                write: function(col, value, view, source) {
+                    return resizeColumn(col, value === null ? null : parseSize(value), source, view);
+                },
+                // With no size of its own, a column in a row with row-cols
+                // takes its share from the row, which the field says
+                blank: function(col, view) {
+                    var winner = view === ALL_VIEW ? null : rowColsWinner(col, breakpoint(view));
+                    return winner ? t('utility.col_from_row', { count: rowColsLabel(winner.value) }) : null;
+                },
+            };
+        }
+
+        /** A size as markup or a select carries it: '4' is 4, 'equal' and 'auto' are themselves. */
+        function parseSize(size) {
+            return /^\d+$/.test(String(size)) ? parseInt(size, 10) : size;
+        }
+
+        /** A row from a toolbar button's data-ge-layout: sizes, or a row-cols layout as JSON. */
         function rowFromLayout(layout) {
+            if (/^\s*\{/.test(layout || '')) { return rowFromLayoutValue(JSON.parse(layout)); }
+
+            return rowFromLayoutValue((layout || '').split(',').filter(function(size) {
+                return size !== '';
+            }).map(parseSize));
+        }
+
+        /**
+         * A row from a layout: an array of sizes, or { row_cols, columns } -
+         * row-cols per breakpoint, and that many columns sized by the row.
+         */
+        function rowFromLayoutValue(layout) {
             var row = createRow();
 
-            (layout || '').split(',').forEach(function(size) {
-                if (size !== '') { createColumn(parseInt(size, 10)).appendTo(row); }
+            if (Array.isArray(layout)) {
+                layout.forEach(function(size) { createColumn(size).appendTo(row); });
+                return row;
+            }
+
+            $.each(layout.row_cols || {}, function(key, value) {
+                var tier = breakpoint(key);
+                if (tier && ROW_COLS_VALUES.indexOf(String(value)) !== -1) { row.addClass(rowColsClass(tier, value)); }
             });
 
+            for (var i = 0; i < (layout.columns || 0); i++) { createColumn(null).appendTo(row); }
+
             return row;
         }
 
+        /** "1, md: 3": a row-cols layout's counts, for its button's title. */
+        function rowColsText(counts) {
+            return BREAKPOINTS.filter(function(tier) { return counts && counts[tier.key] !== undefined; })
+                .map(function(tier) { return (tier.infix ? tier.key + ': ' : '') + counts[tier.key]; })
+                .join(', ');
+        }
+
+        /** The icon of a row-cols layout: one line of equal columns, as many as its widest count. */
+        function rowColsIcon(layout) {
+            var widest = 1;
+            $.each(layout.row_cols || {}, function(key, value) {
+                if (value !== 'auto') { widest = Math.max(widest, parseInt(value, 10) || 1); }
+            });
+
+            return Array.apply(null, Array(Math.min(widest, layout.columns || widest))).map(function() { return 'equal'; });
+        }
+
         function onScroll(e) {
             var $window = $(window);
             
@@ -1136,6 +1351,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             makeSortable();
             makeResizable();
             switchLayout(curView);
+            refreshPreviews(canvas);
         }
 
         function deinit() {
@@ -1156,6 +1372,11 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             hideDropMarker();
             canvas.find('.ge-tools-drawer').remove();
             plugins('onDeinit');
+            // After the rich text editors have let go of their content areas:
+            // one that rebuilt its area's DOM brought the preview styles back
+            // with it, and the attribute recording them came back too
+            clearPreviews(canvas);
+            canvas.find('[data-ge-row-cols]').removeAttr('data-ge-row-cols');
             unmarkContainers();
             removeSortable();
             removeResizable();
@@ -1224,6 +1445,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          */
         function loadPlugins() {
             var api = pluginApi();
+
+            registerFamily('grid', {}, widthFamily());
+            if (settings.row_cols !== false) { registerFamily('grid', {}, rowColsFamily()); }
             var wanted = function(name) {
                 return !settings.plugins || settings.plugins.indexOf(name) !== -1;
             };
@@ -1236,6 +1460,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 if (wanted(name)) { FEATURES[name] = factory(api); }
             });
 
+            $.each($.fn.gridEditor.utilities, function(name, factory) {
+                if (!wanted(name)) { return; }
+
+                UTILITIES[name] = factory(api);
+                (UTILITIES[name].families || []).forEach(function(family) {
+                    registerFamily(name, UTILITIES[name], family);
+                });
+            });
+
             $.each(FEATURES, function(name, feature) {
                 $.each(feature.methods || {}, function(method, implementation) {
                     featureMethods[method] = implementation;
@@ -1243,7 +1476,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
 
             (settings.plugins || []).forEach(function(name) {
-                if (CONTAINERS[name] || FEATURES[name]) { return; }
+                if (CONTAINERS[name] || FEATURES[name] || UTILITIES[name]) { return; }
 
                 warnOnceHere('plugin:' + name, 'the "' + name + '" plugin is not loaded: ' +
                     'include dist/plugins/grideditor.' + name + '.js after the editor');
@@ -1253,7 +1486,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         /**
          * A hook every loaded plugin may have. Containers first, since a
          * feature that looks at the canvas - elements, say - wants the
-         * containers already marked.
+         * containers already marked, and utilities last, since they decorate
+         * nodes the other two may have just made.
          */
         function plugins(hook, argument) {
             $.each(CONTAINERS, function(type, definition) {
@@ -1262,6 +1496,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             $.each(FEATURES, function(name, feature) {
                 if (feature[hook]) { feature[hook](argument); }
             });
+            $.each(UTILITIES, function(name, utility) {
+                if (utility[hook]) { utility[hook](argument); }
+            });
         }
 
         /** What a plugin is handed. See docs/plugins.md. */
@@ -1287,9 +1524,531 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 emit: emit,
                 payloadFor: payloadFor,
                 operate: operate,
+                kindOf: kindOf,
+                view: getView,
+                viewTiers: function() {
+                    return tiersFor(curView).map(function(tier) { return tier.key; });
+                },
+                breakpoints: BREAKPOINTS.map(function(tier) { return tier.key; }),
+                getUtility: getUtility,
+                setUtility: setUtility,
+                utilityField: utilityField,
+                bareStyle: bareStyle,
+                rowFromLayout: rowFromLayoutValue,
+            };
+        }
+
+        /* --------------------------------------------------------------
+         * Utilities: Bootstrap's responsive utility classes.
+         *
+         * A utility plugin declares families - order, d, justify-content -
+         * and this is everything that reads or writes one. Every family is
+         * spelled the way Bootstrap spells them all, {prefix}-{infix}-{value}
+         * with no infix at the smallest tier, and cascades the way the size
+         * classes do: a tier that says nothing takes the nearest smaller one.
+         *
+         * The canvas cannot show a breakpoint's utilities by itself. A
+         * per-breakpoint view narrows the canvas, not the viewport, and
+         * Bootstrap's utilities answer to the viewport with !important. So
+         * each node gets what its classes mean at the view being edited,
+         * as inline !important styles, recorded in an attribute so they come
+         * off again - exactly those, leaving the host's own style alone.
+         * -------------------------------------------------------------- */
+
+        var FAMILIES = {}; // Every family the utility plugins declare, by name
+        var UTILITY_NODES = '.row, .column, .ge-element, [data-ge-container]';
+        var PREVIEW_ATTR = 'data-ge-preview';
+        var utilitiesOpen = false; // Whether the panels show their Responsive section unfolded
+
+        function registerFamily(pluginName, utility, family) {
+            var name = family.name || family.prefix;
+
+            if (FAMILIES[name]) {
+                warn('the "' + pluginName + '" plugin declares the utility "' + name +
+                    '", which the "' + FAMILIES[name].plugin + '" plugin already declared: ignored');
+                return;
+            }
+
+            FAMILIES[name] = {
+                plugin: pluginName,
+                family: $.extend({}, family, {
+                    name: name,
+                    values: family.values.map(String),
+                    appliesTo: family.appliesTo || utility.appliesTo || ['row', 'column'],
+                }),
             };
         }
 
+        /** The family a caller named, or null and a warning when no plugin declares it. */
+        function familyNamed(name, method) {
+            if (FAMILIES[name]) { return FAMILIES[name].family; }
+
+            warnOnceHere('utility:' + name, method + '(' + JSON.stringify(name) + '): no loaded ' +
+                'plugin declares that utility');
+            return null;
+        }
+
+        /**
+         * Whether a family applies to a kind of node. A container answers to
+         * `container` and to its own type, so a plugin can take them all or
+         * name the ones it means.
+         */
+        function appliesTo(family, kind) {
+            if (family.appliesTo.indexOf(kind) !== -1) { return true; }
+
+            return !!CONTAINERS[kind] && family.appliesTo.indexOf('container') !== -1;
+        }
+
+        function familiesFor(kind) {
+            return $.map(FAMILIES, function(entry) {
+                return appliesTo(entry.family, kind) ? entry.family : null;
+            });
+        }
+
+        function utilityClass(family, tier, value) {
+            if (family.className) { return family.className(tier.key, value); }
+
+            return family.prefix + (tier.infix ? '-' + tier.infix : '') + '-' + value;
+        }
+
+        /** The value a node carries a class for at exactly this tier, or null. */
+        function ownUtility(node, family, tier) {
+            var classes = (node.attr('class') || '').split(/\s+/);
+
+            for (var i = 0; i < family.values.length; i++) {
+                if (classes.indexOf(utilityClass(family, tier, family.values[i])) !== -1) {
+                    return family.values[i];
+                }
+            }
+
+            return null;
+        }
+
+        /**
+         * The tier below this one that decides the value here, and what it
+         * says, when this tier says nothing itself. Null when nothing below
+         * says anything either.
+         */
+        function inheritedUtility(node, family, tier) {
+            for (var i = BREAKPOINTS.indexOf(tier) - 1; i >= 0; i--) {
+                var value = ownUtility(node, family, BREAKPOINTS[i]);
+                if (value !== null) { return { tier: BREAKPOINTS[i], value: value }; }
+            }
+
+            return null;
+        }
+
+        /** What applies at a tier: its own class, or what it inherits. */
+        function effectiveUtility(node, family, tier) {
+            var own = ownUtility(node, family, tier);
+            if (own !== null) { return own; }
+
+            var inherited = inheritedUtility(node, family, tier);
+            return inherited ? inherited.value : null;
+        }
+
+        /** Every tier the node carries a class of this family for. */
+        function utilityTiers(node, family) {
+            return BREAKPOINTS.map(function(tier) {
+                return { tier: tier, value: ownUtility(node, family, tier) };
+            }).filter(function(entry) { return entry.value !== null; });
+        }
+
+        function writeUtility(node, family, tier, value) {
+            family.values.forEach(function(candidate) {
+                node.removeClass(utilityClass(family, tier, candidate));
+            });
+
+            if (value !== null) { node.addClass(utilityClass(family, tier, value)); }
+            if (!node.attr('class')) { node.removeAttr('class'); }
+        }
+
+        /**
+         * What a view reads. A breakpoint reads what applies there. The all
+         * view reads the class with no infix, since that is what it writes:
+         * the one class that means "the same at every size".
+         */
+        function readUtility(node, family, view) {
+            return view === ALL_VIEW
+                ? ownUtility(node, family, BREAKPOINTS[0])
+                : effectiveUtility(node, family, breakpoint(view));
+        }
+
+        /**
+         * What writing `value` in a view comes to, or null when it changes
+         * nothing. A breakpoint writes its own tier and nothing else. The all
+         * view writes the class with no infix and clears the family from
+         * every other tier, and says what it cleared: choosing one value for
+         * every size is choosing it over what the sizes said.
+         */
+        function planUtility(node, family, view, value) {
+            if (view !== ALL_VIEW) {
+                var tier = breakpoint(view);
+                if (ownUtility(node, family, tier) === value) { return null; }
+
+                return { writes: [{ tier: tier, value: value }], cleared: [] };
+            }
+
+            var writes = [];
+            var cleared = [];
+
+            utilityTiers(node, family).forEach(function(entry) {
+                if (entry.tier === BREAKPOINTS[0]) { return; }
+
+                writes.push({ tier: entry.tier, value: null });
+                cleared.push({ breakpoint: entry.tier.key, value: entry.value });
+            });
+
+            if (ownUtility(node, family, BREAKPOINTS[0]) !== value) {
+                writes.unshift({ tier: BREAKPOINTS[0], value: value });
+            }
+
+            return writes.length ? { writes: writes, cleared: cleared } : null;
+        }
+
+        /** getUtility(node, family, view?): the value that applies, or null. */
+        function getUtility(node, name, view) {
+            node = $(node).first();
+
+            var family = familyNamed(name, 'getUtility');
+            if (!family || !node.length) { return null; }
+
+            var key = view === undefined ? curView : viewKey(view);
+            if (key === null) {
+                warn('getUtility(' + JSON.stringify(view) + '): no such layout mode');
+                return null;
+            }
+
+            return readUtility(node, family, key);
+        }
+
+        /**
+         * setUtility(node, family, value, view?): write a value through the
+         * events. Null is "inherit". The last argument is a view key, or
+         * { view, source } from a plugin that wants its tool named in the
+         * payload. False when a handler canceled or nothing changed.
+         */
+        function setUtility(node, name, value, options) {
+            options = typeof options == 'string' ? { view: options } : (options || {});
+            node = $(node).first();
+
+            var family = familyNamed(name, 'setUtility');
+            if (!family || !node.length) { return false; }
+
+            var view = options.view === undefined ? curView : viewKey(options.view);
+            if (view === null) {
+                warn('setUtility(' + JSON.stringify(options.view) + '): no such layout mode');
+                return false;
+            }
+
+            value = value === null || value === undefined || value === '' ? null : String(value);
+            if (value !== null && family.values.indexOf(value) === -1) {
+                warn('setUtility: ' + JSON.stringify(value) + ' is not a value of "' + name +
+                    '", which takes ' + JSON.stringify(family.values));
+                return false;
+            }
+
+            var kind = kindOf(node);
+            if (!appliesTo(family, kind)) {
+                warn('setUtility: "' + name + '" does not apply to a ' + kind);
+                return false;
+            }
+
+            // A family whose writes are some other operation - the column
+            // width, which is a resize - does them its own way
+            if (family.write) { return family.write(node, value, view, options.source || 'api'); }
+
+            var plan = planUtility(node, family, view, value);
+            if (!plan) { return false; }
+
+            return operate(function() {
+                var payload = payloadFor(kind, node, {
+                    family: name,
+                    breakpoint: view,
+                    tiers: plan.writes.map(function(write) { return write.tier.key; }),
+                    from: readUtility(node, family, view),
+                    to: value,
+                    cleared: plan.cleared,
+                    source: options.source || 'api',
+                });
+
+                if (!emit('before-utility', payload)) {
+                    // The panel already shows the value that was refused
+                    refreshUtilities(node);
+                    return false;
+                }
+
+                plan.writes.forEach(function(write) {
+                    writeUtility(node, family, write.tier, write.value);
+                });
+                refreshUtilities(node);
+                emit('after-utility', payload);
+
+                return true;
+            });
+        }
+
+        /**
+         * ge.bareStyle(node, family, property): what a css property comes to
+         * on a node with none of the family's classes, at any breakpoint. The
+         * answer a preview needs for "no class applies here" when that is not
+         * a constant: text-align inherits from the parent, and the host's own
+         * css may float an element. The browser is the only one who knows, so
+         * the classes come off for the moment it takes to ask.
+         */
+        function bareStyle(node, name, property) {
+            var family = familyNamed(name, 'bareStyle');
+            node = $(node).first();
+            if (!family || !node.length) { return null; }
+
+            var original = node.attr('class');
+            BREAKPOINTS.forEach(function(tier) { writeUtility(node, family, tier, null); });
+
+            var value = getComputedStyle(node[0]).getPropertyValue(property);
+
+            if (original === undefined) { node.removeAttr('class'); } else { node.attr('class', original); }
+
+            return value;
+        }
+
+        /** Bring a node's panel and preview up to date with its classes. */
+        function refreshUtilities(node) {
+            var details = node.children('.ge-tools-drawer').children('.ge-details');
+
+            details.children('.ge-classes').val(hostClasses(node).join(' '));
+            details.children('.ge-utilities').each(function() { renderUtilities($(this)); });
+            refreshPreviews(node);
+        }
+
+        /* Preview */
+
+        function utilityNodes(scope) {
+            return scope.find(UTILITY_NODES).addBack(UTILITY_NODES);
+        }
+
+        /**
+         * Put what each node's utilities mean at the view being edited on the
+         * node itself. Only nodes that carry a class of a family get anything,
+         * and they get the family's answer for the view even when that is
+         * "nothing": a wider tier's class is still live in a wide window, and
+         * has to be overruled.
+         *
+         * The all view gets nothing. Its canvas is not narrowed, every tier is
+         * live, and what Bootstrap shows is the truth.
+         */
+        function refreshPreviews(scope) {
+            clearPreviews(scope);
+
+            if (curView !== ALL_VIEW) { previewTier(scope, breakpoint(curView)); }
+
+            markRowCols(scope);
+
+            // Whatever a plugin marks the canvas with to show its utilities
+            // goes stale at the same moments the preview does
+            plugins('onRefresh', scope);
+        }
+
+        function previewTier(scope, tier) {
+            utilityNodes(scope).each(function() {
+                var node = $(this);
+                var kind = kindOf(node);
+                var styles = {};
+
+                familiesFor(kind).forEach(function(family) {
+                    if (!family.preview || !utilityTiers(node, family).length) { return; }
+
+                    $.extend(styles, family.preview(effectiveUtility(node, family, tier), node, kind));
+                });
+
+                if (kind === 'column') { $.extend(styles, rowColsPreview(node, tier)); }
+
+                // A plugin whose families settle one property between them
+                // previews the node as a whole
+                $.each(UTILITIES, function(name, utility) {
+                    if (utility.preview) { $.extend(styles, utility.preview(node, kind, tier.key)); }
+                });
+
+                if (!$.isEmptyObject(styles)) { applyPreview(node, styles); }
+            });
+        }
+
+        /**
+         * Set inline !important styles, which is the one thing that beats
+         * Bootstrap's own !important, and remember what each property was so
+         * it can be put back. The record is an attribute rather than jQuery
+         * data because a rich text editor rebuilds the DOM of the area it
+         * edits, and the record has to come back with the node.
+         */
+        function applyPreview(node, styles) {
+            var style = node[0].style;
+            var was = {};
+
+            $.each(styles, function(property, value) {
+                was[property] = [style.getPropertyValue(property), style.getPropertyPriority(property)];
+                style.setProperty(property, String(value), 'important');
+            });
+
+            node.attr(PREVIEW_ATTR, JSON.stringify(was));
+        }
+
+        function clearPreviews(scope) {
+            scope.find('[' + PREVIEW_ATTR + ']').addBack('[' + PREVIEW_ATTR + ']').each(function() {
+                var node = $(this);
+                var style = this.style;
+                var was = {};
+
+                try { was = JSON.parse(node.attr(PREVIEW_ATTR)) || {}; } catch (error) { /* a mangled record: drop it */ }
+
+                $.each(was, function(property, before) {
+                    if (before && before[0]) {
+                        style.setProperty(property, before[0], before[1]);
+                    } else {
+                        style.removeProperty(property);
+                    }
+                });
+
+                node.removeAttr(PREVIEW_ATTR);
+                if (!node.attr('style')) { node.removeAttr('style'); }
+            });
+        }
+
+        /* The panel */
+
+        /**
+         * The Responsive section of a node's settings panel: one field per
+         * family that applies to the node, reading and writing the view being
+         * edited, and whatever fields a plugin builds itself. Folded until the
+         * user unfolds one, and then unfolded on every node, since whoever
+         * wanted it on one wants it on the next.
+         */
+        function createUtilitiesSection(node) {
+            var kind = kindOf(node);
+            var fields = familiesFor(kind)
+                .filter(function(family) { return family.panel !== false; })
+                .map(function(family) { return createField(node, family); });
+
+            $.each(UTILITIES, function(name, utility) {
+                var own = utility.panel ? utility.panel(node, kind) : null;
+                if (own && own.length) { fields.push(own); }
+            });
+
+            if (!fields.length) { return null; }
+
+            var section = $('<div class="ge-utilities" />')
+                .toggleClass('ge-open', utilitiesOpen)
+                .data('ge-node', node)
+            ;
+
+            $('<a class="ge-utilities-toggle" />')
+                .appendTo(section)
+                .on('click', function() {
+                    utilitiesOpen = !section.hasClass('ge-open');
+                    canvas.find('.ge-utilities').toggleClass('ge-open', utilitiesOpen);
+                })
+            ;
+
+            var body = $('<div class="ge-utilities-body" />').appendTo(section);
+            fields.forEach(function(field) { field.appendTo(body); });
+
+            renderUtilities(section);
+
+            return section;
+        }
+
+        /**
+         * One family's field: its label, a select that writes through
+         * setUtility, and a note. Filled by renderField, again whenever the
+         * view or the node's classes change.
+         */
+        function createField(node, family) {
+            var field = $('<label class="ge-utility" />').attr('data-ge-family', family.name);
+
+            $('<span class="ge-utility-label" />')
+                .text(family.labelKey ? t(family.labelKey) : family.name)
+                .appendTo(field)
+            ;
+            $('<select />')
+                .appendTo(field)
+                .on('change', function() {
+                    setUtility(node, family.name, this.value, { source: 'panel' });
+                })
+            ;
+            $('<small class="ge-utility-note" />').appendTo(field);
+
+            return field;
+        }
+
+        /** ge.utilityField(node, family): a field a plugin places in a panel of its own. */
+        function utilityField(node, name) {
+            var family = familyNamed(name, 'utilityField');
+            if (!family) { return $(); }
+
+            var field = createField(node, family);
+            renderField(field, node);
+
+            return field;
+        }
+
+        /** Fill a section's fields, the families' and the plugins' own, for the view being edited. */
+        function renderUtilities(section) {
+            var node = section.data('ge-node');
+
+            section.children('.ge-utilities-toggle')
+                .text(t('utility.section', { view: t(labelKeyFor(curView)) }));
+
+            section.find('.ge-utility').each(function() { renderField($(this), node); });
+        }
+
+        function renderField(field, node) {
+            var family = FAMILIES[field.attr('data-ge-family')].family;
+            var select = field.children('select').empty();
+            var choices = family.choices ? family.choices(node, kindOf(node)) : family.values;
+            var own, blank, note = '';
+
+            if (curView === ALL_VIEW) {
+                own = ownUtility(node, family, BREAKPOINTS[0]);
+                blank = t('utility.default');
+
+                var varies = utilityTiers(node, family).filter(function(entry) {
+                    return entry.tier !== BREAKPOINTS[0];
+                });
+                if (varies.length) {
+                    note = t('utility.varies', {
+                        breakpoints: varies.map(function(entry) { return entry.tier.key; }).join(', '),
+                    });
+                }
+            } else {
+                var tier = breakpoint(curView);
+                var inherited = inheritedUtility(node, family, tier);
+
+                own = ownUtility(node, family, tier);
+                blank = inherited
+                    ? t('utility.inherit', { value: labelOf(family, inherited.value), breakpoint: inherited.tier.key })
+                    : t('utility.default');
+
+                // What the empty choice means is sometimes not the family's
+                // own business: a column's width can come from its row
+                var custom = family.blank ? family.blank(node, curView) : null;
+                if (custom && own === null) { blank = custom; }
+            }
+
+            // A value the markup carries is shown even when the family
+            // would not offer it here, rather than shown as something else
+            if (own !== null && choices.indexOf(own) === -1) { choices = choices.concat([own]); }
+
+            $('<option value="" />').text(blank).appendTo(select);
+            choices.forEach(function(value) {
+                $('<option />').attr('value', value).text(labelOf(family, value)).appendTo(select);
+            });
+
+            select.val(own === null ? '' : own);
+            field.children('.ge-utility-note').text(note).toggle(note !== '');
+        }
+
+        function labelOf(family, value) {
+            return family.label ? family.label(value) : value;
+        }
+
         /* --------------------------------------------------------------
          * Containers: tabs, accordions and popups.
          *
@@ -1305,6 +2064,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
         var CONTAINERS = {}; // The container plugins in use, by the type each builds
         var FEATURES = {}; // The feature plugins in use, by name
+        var UTILITIES = {}; // The utility plugins in use, by name
         var featureMethods = {}; // The methods those features contribute
         var containerCounter = 0;
 
@@ -1621,9 +2381,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             settings.valid_col_sizes.forEach(function(size) {
                 $('<a class="ge-size" />')
                     .attr('data-ge-size', size)
-                    .attr('title', t('tool.column_size', { size: size }))
-                    .toggleClass('ge-size-tight', size > room)
-                    .text(size)
+                    .attr('title', sizeTitle(size))
+                    .toggleClass('ge-size-tight', isUnits(size) && size > room)
+                    .toggleClass('ge-size-flex', !isUnits(size))
+                    .text(isUnits(size) ? size : sizeClass(BREAKPOINTS[0], size))
                     .on('click', function(e) {
                         e.preventDefault();
                         e.stopPropagation();
@@ -1644,6 +2405,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /** True when there was one to close, which is also a click's answer. */
+        function sizeTitle(size) {
+            if (size === 'equal') { return t('tool.column_equal'); }
+            if (size === 'auto') { return t('tool.column_auto'); }
+
+            return t('tool.column_size', { size: size });
+        }
+
         function closeSizePicker() {
             if (!sizePicker) { return false; }
 
@@ -1675,7 +2443,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 createTool(drawer, t('tool.add_column'), 'ge-add-column', 'bi bi-plus-circle', function() {
                     if (closeSizePicker()) { return; } // The picker was open: that was the answer
 
-                    addColumnTo(row, settings.add_column.size);
+                    // In a row with row-cols the new column takes its share
+                    addColumnTo(row, rowColsSource(row, leadingTier()) ? null : settings.add_column.size);
                 });
 
                 attachSizePicker(drawer.find('> .ge-add-column'), row);
@@ -1695,12 +2464,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 createTool(drawer, t('tool.column_narrower'), 'ge-decrease-col-width', 'bi bi-dash-lg', function(e) {
                     resizeColumn(col, e.shiftKey
                         ? smallest(settings.valid_col_sizes)
-                        : stepThrough(settings.valid_col_sizes, currentSize(col), -1),
+                        : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
                         'tool');
                 });
 
                 createTool(drawer, t('tool.column_wider'), 'ge-increase-col-width', 'bi bi-plus-lg', function(e) {
-                    resizeColumn(col, e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes, currentSize(col), 1), 'tool');
+                    resizeColumn(col, e.shiftKey
+                        ? widestFor(col)
+                        : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
+                        'tool');
                 });
 
                 createTool(drawer, t('tool.indent_decrease'), 'ge-decrease-col-offset', 'bi bi-text-indent-right', function(e) {
@@ -1751,17 +2523,43 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * view it is the widest tier, because the canvas is not constrained
          * there and the widest tier is what the user is looking at: clicking
          * "narrower" on a column authored as col-lg-6 should take it to 5,
-         * not to 11 because no xs class was ever written.
+         * not to 11 because no base class was ever written. What the all view
+         * writes is the base class all the same.
          */
         function leadingTier() {
             return curView === ALL_VIEW ? BREAKPOINTS[BREAKPOINTS.length - 1] : breakpoint(curView);
         }
 
+        /** The size that applies in the view: units, `equal` or `auto`. */
         function currentSize(col) {
-            var size = getEffectiveSize(col, leadingTier());
+            var tier = leadingTier();
+
+            // Sized by its row: it has no size of its own to report
+            if (rowColsWinner(col, tier)) { return null; }
+
+            var size = getEffectiveSize(col, tier);
             return size === null ? MAX_COL_SIZE : size;
         }
 
+        /**
+         * The size in units, which is what the tools step through. An equal
+         * or auto column has no number, so it is measured: the width it has
+         * on the canvas, in twelfths of its row.
+         */
+        function currentUnits(col) {
+            var size = currentSize(col);
+            if (isUnits(size)) { return size; }
+
+            var units = Math.round(col.outerWidth() / rowContentWidth(col.parent()) * MAX_COL_SIZE);
+            return Math.min(Math.max(units, 1), MAX_COL_SIZE);
+        }
+
+        function rowContentWidth(row) {
+            var style = window.getComputedStyle(row[0]);
+
+            return row[0].clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+        }
+
         function currentOffset(col) {
             return getEffectiveOffset(col, leadingTier()) || 0;
         }
@@ -1781,11 +2579,11 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         function smallest(values) {
-            return values.reduce(function(a, b) { return Math.min(a, b); }, MAX_COL_SIZE);
+            return values.filter(isUnits).reduce(function(a, b) { return Math.min(a, b); }, MAX_COL_SIZE);
         }
 
         function largest(values) {
-            return values.reduce(function(a, b) { return Math.max(a, b); }, 0);
+            return values.filter(isUnits).reduce(function(a, b) { return Math.max(a, b); }, 0);
         }
 
         /**
@@ -1803,7 +2601,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * itself left inside the row.
          */
         function deepestFor(col) {
-            var room = spare(col.parent(), leadingTier(), col) - currentSize(col);
+            var room = spare(col.parent(), leadingTier(), col) - currentUnits(col);
 
             return Math.min(largest(settings.valid_col_offsets), Math.max(room, 0));
         }
@@ -1846,6 +2644,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function isEditorClass(name) {
             if (name === 'row' || name === 'column') { return true; }
             if (/^(ge-|ui-)/.test(name)) { return true; }
+            if (/^col(-(sm|md|lg|xl|xxl))?(-auto)?$/.test(name)) { return true; }
 
             return BREAKPOINTS.some(function(tier) {
                 return new RegExp('^(' + tier.colPrefix + '|' + tier.offsetPrefix + ')\\d+$').test(name);
@@ -1873,6 +2672,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 details.toggle();
             });
 
+            // Beside the gear, because every node that has one is a node a
+            // utility may apply to, whichever plugin built its drawer
+            var kind = kindOf(node);
+            $.each(UTILITIES, function(name, utility) {
+                if (utility.drawerTools) { utility.drawerTools(drawer, node, kind); }
+            });
+
             return details.appendTo(drawer);
         }
 
@@ -1901,6 +2707,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 .appendTo(detailsDiv)
                 .on('change', function() {
                     setHostClasses(container, this.value);
+                    refreshUtilities(container);
                 })
             ;
 
@@ -1913,11 +2720,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     .on('click', function() {
                         btn.toggleClass('active btn-primary');
                         container.toggleClass(rowClass.cssClass, btn.hasClass('active'));
+                        refreshUtilities(container);
                     })
                     .appendTo(classGroup)
                 ;
             });
 
+            var utilities = createUtilitiesSection(container);
+            if (utilities) { utilities.appendTo(detailsDiv); }
+
             return detailsDiv;
         }
 
@@ -1932,15 +2743,137 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * column that had none.
          */
         function addAllColClasses() {
-            canvas.find('.column, div[class*="col-"]').each(function() {
+            canvas.find('.column, div[class*="col-"], div.col').each(function() {
                 var col = $(this).addClass('column');
 
-                if (sizedTiers(col).length) { return; }
+                // A column in a row with row-cols is sized by its row
+                if (sizedTiers(col).length || hasRowCols(col.parent())) { return; }
 
                 setSize(col, BREAKPOINTS[0], MAX_COL_SIZE);
             });
         }
 
+        /* --------------------------------------------------------------
+         * Columns per row: row-cols-*.
+         *
+         * A row's row-cols class gives every child an equal share of a
+         * line, and a column's own size class takes that share's place.
+         * Which of the two wins at a breakpoint is settled the way
+         * Bootstrap's css settles it: the class from the wider breakpoint,
+         * and at one breakpoint col loses to row-cols, which loses to
+         * col-auto and col-N - the order Bootstrap writes their rules in.
+         * -------------------------------------------------------------- */
+
+        function hasRowCols(row) {
+            return row.hasClass('row') && BREAKPOINTS.some(function(tier) {
+                return ROW_COLS_VALUES.some(function(value) { return row.hasClass(rowColsClass(tier, value)); });
+            });
+        }
+
+        /** The row-cols class that applies to a row at a tier, as { tier, value }, or null. */
+        function rowColsSource(row, tier) {
+            if (!row.hasClass('row')) { return null; }
+
+            for (var i = BREAKPOINTS.indexOf(tier); i >= 0; i--) {
+                for (var v = 0; v < ROW_COLS_VALUES.length; v++) {
+                    if (row.hasClass(rowColsClass(BREAKPOINTS[i], ROW_COLS_VALUES[v]))) {
+                        return { tier: i, value: ROW_COLS_VALUES[v] };
+                    }
+                }
+            }
+
+            return null;
+        }
+
+        /** The column's own size that applies at a tier, as { tier, size }, or null. */
+        function columnSource(col, tier) {
+            for (var i = BREAKPOINTS.indexOf(tier); i >= 0; i--) {
+                var size = getSize(col, BREAKPOINTS[i]);
+                if (size !== null) { return { tier: i, size: size }; }
+            }
+
+            return null;
+        }
+
+        /**
+         * The row-cols class that sizes this column at a tier, or null when
+         * the column's own size does.
+         */
+        function rowColsWinner(col, tier) {
+            var row = rowColsSource(col.parent(), tier);
+            if (!row) { return null; }
+
+            var own = columnSource(col, tier);
+            if (!own || row.tier > own.tier) { return row; }
+
+            return row.tier === own.tier && own.size === 'equal' ? row : null;
+        }
+
+        /** A column's share of a line when its row sizes it, in units: auto has no number. */
+        function rowColsUnits(winner) {
+            return winner.value === 'auto' ? 0 : MAX_COL_SIZE / parseInt(winner.value, 10);
+        }
+
+        /**
+         * What a breakpoint view shows of the row-cols a column is under. The
+         * view narrows the canvas, not the window, and Bootstrap's
+         * .row-cols-md-3 > * answers to the window - and to nothing the
+         * preview can put on the row, since it styles the row's children.
+         */
+        function rowColsPreview(col, tier) {
+            var winner = rowColsWinner(col, tier);
+
+            if (winner) {
+                return {
+                    flex: '0 0 auto',
+                    width: winner.value === 'auto' ? 'auto' : (100 / parseInt(winner.value, 10)) + '%',
+                    'max-width': '100%',
+                };
+            }
+
+            // A wider breakpoint's row-cols is live in a wide window; a
+            // column with no size of its own here is a full width one
+            if (hasRowCols(col.parent()) && !columnSource(col, tier)) {
+                return { flex: '0 0 auto', width: '100%', 'max-width': '100%' };
+            }
+
+            return {};
+        }
+
+        /**
+         * The badge on a row whose columns are sized by row-cols in the view,
+         * and in the all view by its row-cols with no breakpoint.
+         */
+        function markRowCols(scope) {
+            scope.find('.row').addBack('.row').each(function() {
+                var row = $(this);
+                var source = settings.row_cols === false ? null : (curView === ALL_VIEW
+                    ? (rowColsSource(row, BREAKPOINTS[0]) || null)
+                    : rowColsSource(row, breakpoint(curView)));
+
+                if (!source) {
+                    row.removeAttr('data-ge-row-cols');
+                } else {
+                    row.attr('data-ge-row-cols', rowColsLabel(source.value));
+                }
+            });
+        }
+
+        function rowColsLabel(value) {
+            return value === 'auto' ? t('badge.row_cols_auto') : t('badge.row_cols', { count: value });
+        }
+
+        /** The core's family for the field in a row's panel. */
+        function rowColsFamily() {
+            return {
+                name: 'row-cols',
+                prefix: 'row-cols',
+                values: ROW_COLS_VALUES,
+                appliesTo: ['row'],
+                labelKey: 'utility.row_cols',
+            };
+        }
+
         /* --------------------------------------------------------------
          * The sizing core.
          *
@@ -1950,9 +2883,18 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * names, the 12 unit budget and what an absent class means.
          * -------------------------------------------------------------- */
 
-        /** The units a column is given at one tier, or null if that tier says nothing. */
+        /**
+         * A column's size at one tier: a number of units, `equal`, `auto`, or
+         * null when that tier says nothing.
+         */
         function getSize(col, tier) {
-            return readUnits(col, tier.colPrefix);
+            var units = readUnits(col, tier.colPrefix);
+            if (units !== null) { return units; }
+
+            if (col.hasClass(sizeClass(tier, 'auto'))) { return 'auto'; }
+            if (col.hasClass(sizeClass(tier, 'equal'))) { return 'equal'; }
+
+            return null;
         }
 
         /** The units a column is indented by at one tier, or null. */
@@ -2002,8 +2944,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             col.attr('class', classes.join(' '));
         }
 
-        function setSize(col, tier, units) {
-            writeUnits(col, tier.colPrefix, units);
+        /** One size per tier: writing a size takes whatever size the tier had off. */
+        function setSize(col, tier, size) {
+            writeUnits(col, tier.colPrefix, null);
+            FLEX_SIZES.forEach(function(flex) { col.removeClass(sizeClass(tier, flex)); });
+
+            if (size !== null && size !== undefined) { col.addClass(sizeClass(tier, size)); }
         }
 
         /** An offset of 0 is written as no class at all, which is what it means. */
@@ -2029,7 +2975,11 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 var sibling = $(this);
                 if (ignore && sibling[0] === ignore[0]) { return; }
 
-                used += (getEffectiveSize(sibling, tier) || 0) + (getEffectiveOffset(sibling, tier) || 0);
+                // An equal or auto column takes what is left, so it uses none;
+                // one its row sizes uses its share of the line
+                var winner = rowColsWinner(sibling, tier);
+                var size = winner ? rowColsUnits(winner) : getEffectiveSize(sibling, tier);
+                used += (isUnits(size) ? size : 0) + (getEffectiveOffset(sibling, tier) || 0);
             });
 
             return MAX_COL_SIZE - used;
@@ -2050,7 +3000,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             offset = Math.min(Math.max(offset, 0), MAX_COL_OFFSET);
 
-            if (size === null) { return { size: null, offset: offset, refused: false }; }
+            if (size === null || !isUnits(size)) { return { size: size, offset: offset, refused: false }; }
 
             size = Math.min(Math.max(size, 1), MAX_COL_SIZE);
 
@@ -2094,6 +3044,35 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return 'ge-' + name + '-' + instanceId;
         }
 
+        /**
+         * What the canvas, the columns and the plugins' regions move: rows,
+         * content areas and containers, and whatever blocks a feature adds -
+         * the sections plugin's sections.
+         */
+        function blockSelector() {
+            return ['.row', '.ge-content', '[data-ge-container]'].concat(pluginHooks('blocks')).join(', ');
+        }
+
+        /** A selector every feature plugin may contribute to, under one name. */
+        function pluginHooks(name) {
+            return $.map(FEATURES, function(feature) { return feature[name] || null; });
+        }
+
+        /**
+         * Whether a region will have a block dropped in it. Every block goes
+         * everywhere unless a feature says otherwise: a section only on the
+         * canvas, and only rows in a section.
+         */
+        function acceptsBlock(region, node) {
+            var accepted = true;
+
+            $.each(FEATURES, function(name, feature) {
+                if (accepted && feature.accepts && feature.accepts(region, node) === false) { accepted = false; }
+            });
+
+            return accepted;
+        }
+
         /** What must never start a drag, whatever the handle is. */
         function dragCancelSelector() {
             return settings.drag_handle === 'drawer'
@@ -2131,6 +3110,16 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     ? { name: groupName(options.group) }
                     : { name: groupName(options.draggable + '-' + (++soloGroup)), pull: false, put: false };
 
+                // A list may turn some of its group's items away. A put
+                // function replaces SortableJS's own test that the item comes
+                // from the same group, so it makes that test too: without it
+                // a column would drop into the canvas, or into another editor
+                if (options.group && options.accepts) {
+                    group.put = function(to, from, dragged) {
+                        return from.options.group.name === group.name && options.accepts($(to.el), $(dragged));
+                    };
+                }
+
                 sortables.push(window.Sortable.create(list, $.extend({
                     group: group,
                     draggable: options.draggable,
@@ -2195,9 +3184,24 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
 
             sortable(canvas.add(canvas.find('.column')), {
-                draggable: '.row, .ge-content, [data-ge-container]',
+                draggable: blockSelector(),
                 group: 'block',
-            });
+                accepts: acceptsBlock,
+            });
+
+            // A plugin's region can be a block itself - a section is both -
+            // and SortableJS tests a list's own element against the draggable
+            // selector when it counts the list's children, so every child of
+            // a section would count as a block, its drawer first. '>' is
+            // SortableJS for "direct children only", which the list is not.
+            var regions = pluginHooks('regions');
+            if (regions.length) {
+                sortable(canvas.find(regions.join(', ')), {
+                    draggable: '>' + blockSelector(),
+                    group: 'block',
+                    accepts: acceptsBlock,
+                });
+            }
 
             // A plugin makes its own: only it knows which of its parts move
             plugins('onSortable', sortable);
@@ -2369,20 +3373,21 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * divider between two columns looks like it should do.
          */
         function snapUnits(col, pixels) {
-            var row = col.parent();
-            var style = window.getComputedStyle(row[0]);
-            var content = row[0].clientWidth -
-                parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
-
-            var units = Math.round(pixels / content * MAX_COL_SIZE);
+            var units = Math.round(pixels / rowContentWidth(col.parent()) * MAX_COL_SIZE);
             var next = balanceSibling(col);
+            var nextSize = next ? currentSize(next) : null;
+
+            // Measured when the drag started: the column is the width of the
+            // pointer now, which is not what it was
+            var own = col.data('ge-resize-units');
 
             // With a sibling to balance against, the drag may take that
             // column's units but not its last one. Without one, the row is
             // allowed to wrap - that is what balance false means - so the only
             // limit is the column's own budget against its indent.
-            var room = next
-                ? currentSize(col) + currentSize(next) - smallest(settings.valid_col_sizes)
+            // An equal or auto sibling gives way by itself, so it sets no limit
+            var room = next && isUnits(nextSize)
+                ? own + nextSize - smallest(settings.valid_col_sizes)
                 : MAX_COL_SIZE - currentOffset(col);
 
             return Math.min(
@@ -2428,7 +3433,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             if (!allowed) { return false; }
 
             col.data('ge-resize-from', from);
-            resizeReadout(col, sizeLabel(from));
+            col.data('ge-resize-units', currentUnits(col));
+            resizeReadout(col, sizeLabel(col.data('ge-resize-units')));
 
             return true;
         }
@@ -2439,30 +3445,33 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
         function resizeStop(col, width) {
             var from = col.data('ge-resize-from');
+            var started = col.data('ge-resize-units');
             var units = snapUnits(col, width);
 
-            col.removeData('ge-resize-from');
+            col.removeData('ge-resize-from').removeData('ge-resize-units');
             resizeReadout(col, '');
             stripPixelWidths(col);
 
             if (from === undefined) { return; }
 
             // A drag of a couple of pixels lands on the size it started from,
-            // and is not a resize
-            if (units === from) { return; }
+            // and is not a resize - not even of an equal or auto column,
+            // which it would otherwise turn into a number
+            if (units === started) { return; }
 
             var plan = planSize(col, units);
             if (!plan) { return; }
 
             operate(function() {
                 writeSize(col, plan);
-                balanceAfterResize(col, plan.size - from);
+                balanceAfterResize(col, units - started);
+                refreshUtilities(col);
 
-                emit('after-resize', payloadFor('column', col, {
+                emit('after-resize', payloadFor('column', col, withCleared({
                     source: 'dragdrop',
                     from: from,
                     to: plan.size,
-                }));
+                }, plan.cleared)));
             });
         }
 
@@ -2470,12 +3479,22 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * Move the delta into the following column, so a full row stays full.
          * It is part of the same gesture, so it is not announced separately.
          */
+        /**
+         * The column after takes what the resized one gave or took, unless it
+         * is equal or auto: those take what is left by themselves.
+         */
         function balanceAfterResize(col, delta) {
             var next = balanceSibling(col);
             if (!next || !delta) { return; }
 
-            var plan = planSize(next, currentSize(next) - delta);
-            if (plan) { writeSize(next, plan); }
+            var size = currentSize(next);
+            if (!isUnits(size)) { return; }
+
+            var plan = planSize(next, size - delta);
+            if (plan) {
+                writeSize(next, plan);
+                refreshUtilities(next);
+            }
         }
 
         /**
@@ -2542,13 +3561,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function apiCreateRow(layout, options) {
             var row = createRow();
 
-            if (layout !== undefined && !Array.isArray(layout)) {
-                warn('createRow: the layout is an array of column sizes, as in [8, 4]. ' +
-                    'Making an empty row instead.');
+            if (layout !== undefined && !Array.isArray(layout) && !(layout && layout.row_cols)) {
+                warn('createRow: the layout is an array of column sizes, as in [8, 4], or ' +
+                    '{ row_cols, columns }. Making an empty row instead.');
                 layout = [];
             }
 
-            (layout || []).forEach(function(size) {
+            if (layout && !Array.isArray(layout)) { row = rowFromLayoutValue(layout); }
+
+            (Array.isArray(layout) ? layout : []).forEach(function(size) {
                 createColumn(size).appendTo(row);
             });
 
@@ -2561,7 +3582,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function apiCreateColumn(size, options) {
             options = options || {};
 
-            if (typeof size != 'number') {
+            // Going into a row with row-cols, no size is a size: the row's share
+            var into = $(options.appendTo || options.prependTo || []).first();
+
+            if (size === undefined && into.length && rowColsSource(into, leadingTier())) {
+                size = null;
+            } else if (!isUnits(size) && FLEX_SIZES.indexOf(size) === -1) {
                 warn('createColumn: no column size given, using ' + MAX_COL_SIZE);
                 size = MAX_COL_SIZE;
             }
@@ -2632,8 +3658,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * A column sized for the current view: one tier, or every tier in the
-         * all view. `offset` indents it, within the same 12 unit budget.
+         * A column sized for the current view: its tier, or the base class in
+         * the all view. `offset` indents it, within the same 12 unit budget.
          */
         function createColumn(size, offset) {
             var rte = getRTE(settings.content_types[0]);
@@ -2641,12 +3667,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 .append(createDefaultContentWrapper().html(rte ? rte.initialContent : ''))
             ;
 
-            tiersFor(curView).forEach(function(tier) {
-                var wanted = clamp({ size: size, offset: offset || 0, leading: 'offset' });
+            // The tier being edited, or the base class in the all view
+            var tier = tiersFor(curView)[0];
+            var wanted = clamp({ size: size, offset: offset || 0, leading: 'offset' });
 
-                setSize(column, tier, wanted.size === null ? size : wanted.size);
-                setOffset(column, tier, wanted.offset);
-            });
+            setSize(column, tier, wanted.size === null ? size : wanted.size);
+            setOffset(column, tier, wanted.offset);
 
             return column;
         }
@@ -2758,7 +3784,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 return;
             }
 
+            var from = curView;
             switchLayout(key);
+
+            if (key === from) { return; }
+
+            canvas.find('.ge-utilities').each(function() { renderUtilities($(this)); });
+            refreshPreviews(canvas);
+            plugins('onViewChange', key);
+            emit('view-change', { canvas: canvas, breakpoint: key, from: from, to: key });
         }
 
         function getView() {
@@ -2796,12 +3830,23 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
                 return featureMethods.createElement(content, options);
             },
+            createSection: function(options) {
+                if (!featureMethods.createSection) {
+                    warnOnceHere('plugin:sections', 'createSection needs the sections plugin: ' +
+                        'include dist/plugins/grideditor.sections.js after the editor');
+                    return null;
+                }
+
+                return featureMethods.createSection(options);
+            },
             createContainer: apiCreateContainer,
             addTab: function(container, options) { return addPaneTo(container, 'tabs', options); },
             addAccordionItem: function(container, options) {
                 return addPaneTo(container, 'accordion', options);
             },
             setLocale: setLocale,
+            getUtility: getUtility,
+            setUtility: setUtility,
             canvas: canvas,
             settings: settingsCopy(),
         };
@@ -2853,6 +3898,18 @@ $.fn.gridEditor.containers = {};
  */
 $.fn.gridEditor.features = {};
 
+/**
+ * Utility plugins: Bootstrap's responsive utility classes - order-md-2,
+ * d-lg-none - edited per breakpoint. A plugin declares families of classes
+ * and the editor reads them, writes them, puts them in the settings panel and
+ * previews them in each view. Same factory, same `plugins` setting.
+ *
+ *   $.fn.gridEditor.utilities.order = function(ge) {
+ *       return { families: [{ name: 'order', prefix: 'order', values: [...] }] };
+ *   };
+ */
+$.fn.gridEditor.utilities = {};
+
 /** Translator for the editor integrations, which get settings and no instance. */
 $.fn.gridEditor.t = translate;
 
@@ -2874,6 +3931,8 @@ $.fn.gridEditor.locales = {
         'tool.add_row': 'Add row',
         'tool.add_column': 'Add column\n(hold to choose the width)',
         'tool.column_size': '{size} of 12',
+        'tool.column_equal': 'Equal: shares what the row has left',
+        'tool.column_auto': 'Auto: as wide as its content',
         'tool.delete_row': 'Remove row',
         'tool.delete_column': 'Remove col',
         'tool.delete_container': 'Remove container',
@@ -2891,6 +3950,7 @@ $.fn.gridEditor.locales = {
         'tool.classes_title': 'Css classes, separated by spaces',
         'tool.toggle_class': 'Toggle "{label}" styling',
         'row.add': 'Add row {layout}',
+        'row.add_row_cols': 'Add a row of {columns} columns, {counts} per row',
         'confirm.title': 'Confirm',
         'confirm.ok': 'Delete',
         'confirm.cancel': 'Cancel',
@@ -2904,6 +3964,17 @@ $.fn.gridEditor.locales = {
         'view.lg': 'Desktop',
         'view.xl': 'Large desktop',
         'view.xxl': 'Widescreen',
+        'utility.section': 'Responsive: {view}',
+        'utility.col_width': 'Width',
+        'utility.col_equal': 'Equal',
+        'utility.col_auto': 'Auto',
+        'utility.col_from_row': 'From the row: {count}',
+        'utility.row_cols': 'Columns per row',
+        'badge.row_cols': '{count} per row',
+        'badge.row_cols_auto': 'As wide as their content',
+        'utility.default': 'Default',
+        'utility.inherit': 'Inherit: {value} (from {breakpoint})',
+        'utility.varies': 'Changes at {breakpoints}; choosing here replaces that',
         'error.sortable_missing': 'SortableJS not available! Make sure you loaded the Sortable js file; dragging is off without it.',
         'warning.setting_removed': 'The {setting} setting was removed in 4.0. Use {replacement} instead.',
         'error.tinymce_missing': 'tinyMCE not available! Make sure you loaded the tinyMCE js file.',