@themarioga/grid-editor 4.0.0 → 5.0.0

package/docs/events.md

@@ -56,6 +56,9 @@ about every insertion can bind `grideditor:before-add` and switch on
 | `grideditor:before-indent` | — | yes | before a column's offset changes |
 | `grideditor:after-indent` | — | no | after the offset class is written |
 | `grideditor:popup-orphan` | — | no | on `init`, once per trigger whose popup is missing and cannot be re-pointed |
+| `grideditor:before-utility` | — | yes | before a utility class is written, from the panel, a plugin's tool or `setUtility` |
+| `grideditor:after-utility` | — | no | after the class is written and the preview redrawn, only if something changed |
+| `grideditor:view-change` | — | no | after the view changes, only if it actually changed |
 
 Two things here are not in the 3.0 specification's catalogue. The indent pair,
 because the indent tools are an operation like any other and announce
@@ -70,28 +73,53 @@ The payload
 {
     kind: 'row',          // row | column | content | element
                           // tabs | accordion | popup | tab | accordion-item
+                          // section, with the sections plugin
     node: jQuery,         // the node added, deleted, moved or resized
     parent: jQuery,       // where it is going, or where it came from on a delete
     canvas: jQuery,
     breakpoint: 'lg',     // the view at the time: a breakpoint key, or 'all'
-    source: 'tool',       // tool | api | dragdrop
+    source: 'tool',       // tool | api | dragdrop | panel (a width chosen in the panel)
 
     // move only
     from: { parent: jQuery, index: 2 },
     to:   { parent: jQuery, index: 0 },
 
-    // resize and indent only: units, not pixels
+    // resize and indent only: units, not pixels. A size can also be
+    // 'equal' or 'auto', and null when the width field chose "inherit"
     from: 6,
     to: 7,
+    cleared: [            // the all view only: the breakpoints' own sizes or
+        { breakpoint: 'md', value: 4 },     // offsets, which the write took off
+    ],
 
     // a pane inside a container
     container: jQuery,
 
     // popup-orphan only
     missing: 'ge-popup-3-a91',   // the id the trigger pointed at
+
+    // utility only
+    family: 'order',      // the utility, as its plugin names it
+    from: '1',            // what applied in the view before, or null
+    to: '2',              // what was asked for; null is "inherit"
+    tiers: ['md'],        // the breakpoints whose class was written
+    cleared: [            // the all view only: what the breakpoints said,
+        { breakpoint: 'lg', value: '3' },   // and the write took away
+    ],
 }
 ```
 
+A section's width change is announced as a utility change too, with
+`family: 'section'`, `breakpoint: 'all'` and the widths - `'fixed'`, `'fluid'`,
+`'md'` - as `from` and `to`: a section has one container class, whatever the
+breakpoint. Adding a section fires `before-add-section` and `after-add-section`,
+with the generic pair.
+
+`view-change` carries no node: its payload is `canvas`, `breakpoint` (the new
+view), `from` and `to`. A utility's `breakpoint` is the view it was written
+in, which `setUtility` can be asked to make a different one from the view on
+screen, and its `source` is `panel`, `tool` or `api`.
+
 `source` matters to a host that both drives the editor from its own palette and
 listens for what the user does: `api` is your own call coming back to you,
 `tool` is a click in the editor, `dragdrop` is a gesture.
@@ -121,6 +149,8 @@ cancels a `before-*`. What that means depends on the operation:
 - **Resize.** From a tool, nothing is written. From a drag, the gesture never
   starts: the column does not move and nothing is written.
 - **Indent.** Nothing is written.
+- **Utility.** Nothing is written, `setUtility` returns `false`, and the panel
+  field goes back to the value that stands.
 
 `after-move` is suppressed when the drop leaves the node in the same parent at
 the same index, and `after-resize` when the snapped size equals the old one, so

package/docs/locale-keys.md

@@ -30,6 +30,8 @@ The tools in a drawer, and the buttons in the toolbar above the canvas.
 | `tool.add_row` | Add row | Column drawer, adds a nested row |
 | `tool.add_column` | Add column\n(hold to choose the width) | Row drawer. A click adds a column, holding the tool offers the widths. Two lines |
 | `tool.column_size` | {size} of 12 | Tooltip of a width in that picker |
+| `tool.column_equal` | Equal: shares what the row has left | The `equal` choice in that picker, which adds a `col` |
+| `tool.column_auto` | Auto: as wide as its content | The `auto` choice in that picker, which adds a `col-auto` |
 | `tool.delete_row` | Remove row | Row drawer |
 | `tool.delete_column` | Remove col | Column drawer |
 | `tool.delete_element` | Remove element | Element drawer |
@@ -57,6 +59,7 @@ row.*
 | Key | English | Where |
 | --- | --- | --- |
 | `row.add` | Add row {layout} | Tooltip of each toolbar add-row button. `{layout}` is the column layout, as in `6-6` |
+| `row.add_row_cols` | Add a row of {columns} columns, {counts} per row | Tooltip of a toolbar button for a `{ row_cols, columns }` layout. `{counts}` reads like `1, md: 3` |
 
 
 container.*
@@ -80,6 +83,23 @@ The containers: tabs, accordions and popups, and the panes inside them.
 | `container.card_footer` | Card footer | Text of a new card's footer, when it has one |
 
 
+section.*
+---------
+
+The sections plugin: Bootstrap's `.container` and its kin, on the canvas.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `section.add` | Section | Toolbar button that adds a section |
+| `section.width` | Width | Label of a section's width field, in its settings panel |
+| `section.fixed` | Fixed | Its choice for `container` |
+| `section.fluid` | Full width | Its choice for `container-fluid` |
+| `section.from` | Fixed from {breakpoint} | Its choice for `container-{bp}`. `{breakpoint}` is the key |
+| `tool.add_row_to_section` | Add row | Section drawer, adds a row to the section |
+| `tool.delete_section` | Remove section | Section drawer |
+| `confirm.delete_section` | Delete this section and everything in it? | Asked before a section is deleted |
+
+
 confirm.*
 ---------
 
@@ -113,7 +133,7 @@ key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
 
 | Key | English | Where |
 | --- | --- | --- |
-| `view.all` | All sizes | The default view, which writes every breakpoint at once |
+| `view.all` | All sizes | The default view, which writes one class for every breakpoint |
 | `view.xs` | Phone | Layout mode writing `col-*` and `offset-*` |
 | `view.sm` | Tablet | Layout mode writing `col-sm-*` and `offset-sm-*` |
 | `view.md` | Small desktop | Layout mode writing `col-md-*` and `offset-md-*` |
@@ -122,6 +142,73 @@ key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
 | `view.xxl` | Widescreen | Layout mode writing `col-xxl-*` and `offset-xxl-*` |
 
 
+utility.*
+---------
+
+The Responsive section of a settings panel, which the utility plugins fill.
+The labels of each utility and its values are the plugins' own keys.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `utility.section` | Responsive: {view} | The section's fold toggle. `{view}` is the label of the view being edited |
+| `utility.col_width` | Width | The column width field, in a column's Responsive section |
+| `utility.col_equal` | Equal | Its choice for `col` / `col-{bp}` |
+| `utility.col_auto` | Auto | Its choice for `col-auto` / `col-{bp}-auto` |
+| `utility.col_from_row` | From the row: {count} | The width field's empty choice when the row's row-cols sizes the column. `{count}` is `badge.row_cols` |
+| `utility.row_cols` | Columns per row | The row-cols field, in a row's Responsive section |
+| `utility.default` | Default | The empty choice of a field when nothing below the view sets the utility, and always in the all view |
+| `utility.inherit` | Inherit: {value} (from {breakpoint}) | The empty choice in a breakpoint view when a smaller breakpoint sets the utility. `{breakpoint}` is its key, `sm` |
+| `utility.varies` | Changes at {breakpoints}; choosing here replaces that | Note under a field in the all view when breakpoints set their own value. `{breakpoints}` is a list of keys |
+| `utility.visibility` | Visibility | Label of the visibility plugin's field |
+| `utility.visibility_hidden` | Hidden | Its choice for `d-*-none` |
+| `utility.visibility_shown` | Shown | Its choice for `d-*-block`, or `d-*-flex` on a row |
+| `tool.hide_in_view` | Hide in this view | The visibility plugin's eye, on a node shown in the view being edited |
+| `tool.show_in_view` | Show in this view | The same eye, on a node hidden there |
+| `utility.order` | Order | Label of the order plugin's field |
+| `utility.order_first` | First | Its choice for `order-*-first` |
+| `utility.order_last` | Last | Its choice for `order-*-last` |
+| `tool.order_earlier` | Earlier in this view | The order plugin's left arrow in a column drawer |
+| `tool.order_later` | Later in this view | Its right arrow |
+| `utility.justify_content` | Justify columns | The alignment plugin's `justify-content-*` field, on a row |
+| `utility.align_items` | Align columns | Its `align-items-*` field, on a row |
+| `utility.align_self` | Align self | Its `align-self-*` field, on a column |
+| `utility.gutters` | Gutters | The gutters plugin's `g-*` field, on a row |
+| `utility.gutters_x` | Horizontal gutters | Its `gx-*` field |
+| `utility.gutters_y` | Vertical gutters | Its `gy-*` field |
+| `utility.padding` | Padding | The spacing plugin's padding group |
+| `utility.margin` | Margin | Its margin group |
+| `utility.side_all` | All sides | The side of `p-*` and `m-*` in a group's side choice |
+| `utility.side_x` | Left and right | The side of `px-*` and `mx-*` |
+| `utility.side_y` | Top and bottom | The side of `py-*` and `my-*` |
+| `utility.side_t` | Top | The side of `pt-*` and `mt-*` |
+| `utility.side_b` | Bottom | The side of `pb-*` and `mb-*` |
+| `utility.side_s` | Start | The side of `ps-*` and `ms-*` |
+| `utility.side_e` | End | The side of `pe-*` and `me-*` |
+| `utility.text_align` | Text alignment | Label of the textalign plugin's field |
+| `utility.text_start` | Start | Its choice for `text-*-start` |
+| `utility.text_center` | Center | Its choice for `text-*-center` |
+| `utility.text_end` | End | Its choice for `text-*-end` |
+| `utility.float` | Float | Label of the float plugin's field, on an element |
+| `utility.float_start` | Start | Its choice for `float-*-start` |
+| `utility.float_end` | End | Its choice for `float-*-end` |
+| `utility.float_none` | None | Its choice for `float-*-none` |
+| `utility.spacing_gutter` | A column's side padding is its gutter: changing it changes the gutter | Note in a column's spacing group while it carries side padding |
+
+
+badge.*
+-------
+
+Text the utility plugins show on the canvas while editing. Never in the
+markup `getHtml` returns.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `badge.hidden_in` | Hidden at {breakpoints} | Corner of a node hidden at some breakpoints, in the all view. `{breakpoints}` is a list of keys |
+| `badge.row_cols` | {count} per row | Corner of a row whose row-cols sizes its columns in the view being edited |
+| `badge.row_cols_auto` | As wide as their content | The same, for `row-cols-auto` |
+| `badge.order` | Order: {value} | Corner of a column ordered by class in the view being edited |
+
+
 error.*
 -------
 

package/docs/plugins.md

@@ -14,11 +14,13 @@ the one to read first if you are about to write your own.
 <script src="dist/plugins/grideditor.elements.min.js"></script>
 ```
 
-There are two kinds. A **container plugin** builds a type of container — it
+There are three kinds. A **container plugin** builds a type of container — it
 registers under `$.fn.gridEditor.containers`, and the toolbar offers a button
-for it. A **feature plugin** is anything else the editor can do —
+for it. A **utility plugin** declares families of Bootstrap's responsive
+utility classes — `$.fn.gridEditor.utilities` — and the editor edits them per
+breakpoint. A **feature plugin** is anything else the editor can do —
 `$.fn.gridEditor.features`, hooks into the canvas, and may contribute methods.
-Both are factories called once per editor with the same handle.
+All three are factories called once per editor with the same handle.
 
 The `plugins` setting names which of the loaded ones to use:
 
@@ -114,6 +116,15 @@ not change without a major version.
 | `ge.emit(name, payload)` | Fire an event and its callbacks; false means a handler canceled |
 | `ge.payloadFor(kind, node, extra)` | Build a payload the documented way |
 | `ge.operate(body)` | Run `body` as one operation, so a handler calling back in is queued |
+| `ge.kindOf(node)` | What an event calls a node: `row`, `column`, `element`, a container's type… |
+| `ge.view()` | The view being edited: a breakpoint key, or `'all'` |
+| `ge.viewTiers()` | The breakpoint key that view writes: the one being edited, or `xs` - the class with no breakpoint - in the all view |
+| `ge.breakpoints` | Every breakpoint key, smallest first |
+| `ge.getUtility(node, family, view?)` | A utility's value, as in the public method |
+| `ge.setUtility(node, family, value, options?)` | Write one through the events. `options` is a view key or `{ view, source }` |
+| `ge.utilityField(node, family)` | A panel field for one family, for a plugin that builds its own panel |
+| `ge.rowFromLayout(layout)` | A detached row from a layout: `[8, 4]`, `['auto', 'equal']` or `{ row_cols, columns }` |
+| `ge.bareStyle(node, family, property)` | A css property's value on the node with none of the family's classes: what a preview shows when no class applies and that is not a constant |
 
 The add, delete and move events for a container and its panes are fired by the
 editor, not by the plugin: `createPaneControls` handles a pane's delete, and
@@ -134,10 +145,29 @@ $.fn.gridEditor.features.elements = function(ge) {
         onDeinit: function() { … },      // every deinit: take it out again
         onContentReady: function(area) { … },  // a rich text editor just took over
         onSortable: function(sortable) { … },  // declare your own sortable lists
+        blocks: '.ge-section',            // more blocks the canvas and the columns move
+        regions: '.ge-section',           // more lists those blocks move in
+        accepts: function(region, node) { … },  // false turns a block away from a region
+        toolbar: [{ labelKey: …, kind: …, create: function() { … } }],  // buttons beside the containers'
     };
 };
 ```
 
+The last four are what the sections plugin is made of, and what a plugin
+needs to put a new kind of block on the canvas:
+
+- **`blocks`** is a selector added to what the canvas and every column move -
+  rows, content areas and containers, the editor's own blocks.
+- **`regions`** is a selector for more lists those blocks move in, in the same
+  group, so a row dragged from the canvas can land in one.
+- **`accepts(region, node)`** can turn a block away from a list: `false` and the
+  drag will not drop it there, whoever's block and whoever's list. With none of
+  these hooks, every block goes everywhere, as before.
+- **`toolbar`** adds buttons beside the containers'. A click appends what
+  `create()` returns to the canvas, announced as `kind`; a drop puts it where it
+  was dropped, or, when that region will not have it, on the canvas just after
+  the block it was dropped in.
+
 - **`onSortable(sortable)`** is handed the function the editor makes all of its
   own lists with. A plugin describes a list; it never touches the drag toolkit
   itself, which is what keeps `drag_handle`, the cancel selector and the move
@@ -177,3 +207,111 @@ the plugin.
 Sorting is the one thing a plugin sets up itself, in `mark`, because only the
 plugin knows which of its parts move: the tabs plugin makes its strip sortable
 and puts the panes back in strip order in `afterPaneMove`.
+
+
+Utility plugins
+---------------
+
+A utility plugin edits one of Bootstrap's responsive utility classes — the
+ones spelled `{property}-{breakpoint}-{value}`, like `order-md-2` or
+`d-lg-none` — and hardly has to do anything to do it. It declares **families**,
+and the editor reads, writes, previews and announces them:
+
+```javascript
+$.fn.gridEditor.utilities.order = function(ge) {
+    return {
+        families: [{
+            name: 'order',                 // what events and setUtility call it
+            prefix: 'order',               // order-2, order-md-2, order-xxl-2
+            values: ['first', 0, 1, 2, 3, 4, 5, 'last'],
+            appliesTo: ['column'],         // row | column | element | container | a container type
+            labelKey: 'utility.order',     // the field's label, optional
+            label: function(value) { … },  // an option's text, optional: the value itself otherwise
+            choices: function(node, kind) { … },   // what to offer this node, optional: every value otherwise
+            panel: false,                          // optional: no field of its own, see "A panel of your own"
+            className: function(breakpoint, value) { … },   // optional, for classes not spelled {prefix}-{bp}-{value}
+            write: function(node, value, view, source) { … }, // optional, a write that is some other operation
+            preview: function(value, node, kind) { // what the value looks like, see below
+                return { order: value === null ? 0 : value };
+            },
+        }],
+        drawerTools: function(drawer, node, kind) { … },  // optional, tools beside the gear
+        onRefresh: function(scope) { … },                 // optional, see below
+        panel: function(node, kind) { … },                // optional, see "A panel of your own"
+        preview: function(node, kind, breakpoint) { … },  // optional, the same
+        onViewChange: function(view) { … },               // optional
+    };
+};
+```
+
+What the editor does with a family:
+
+- **Reading follows the cascade.** A breakpoint's value is its own class or the
+  nearest smaller breakpoint's. The all view reads the class with no infix.
+- **Writing depends on the view.** A breakpoint view writes its own tier and
+  nothing else. The all view writes the class with no infix and takes the
+  family off every other breakpoint, because choosing one value for every size
+  is choosing it over what the sizes said; the event says what it took off.
+  `null` is inherit: the tier's class comes off.
+- **The panel.** Every node with a gear gets a folded *Responsive* section in
+  its settings panel, with a field per family that applies to it. A field shows
+  the view being edited, says what it inherits and from which breakpoint, and
+  follows the classes field when the user types there.
+- **The preview.** A breakpoint view narrows the canvas, not the window, and
+  Bootstrap's utilities answer to the window with `!important`. So in a
+  breakpoint view each node that carries a family's class gets
+  `preview(value)` — the value that applies there, or `null` — as inline
+  `!important` styles. Return what `null` looks like too: a wider breakpoint's
+  class is still live in a wide window and has to be overruled. When what
+  `null` looks like depends on the page — `text-align` inherits, the host's
+  css may float an element — `ge.bareStyle(node, family, property)` asks the
+  browser. Parents are previewed before their children. The all view
+  previews nothing, since every breakpoint there is live and what Bootstrap
+  shows is the truth. The styles come off on `deinit`, leaving the host's own
+  `style` as it was, so `getHtml` never sees them.
+- **The events.** Every write goes through `before-utility`, which can cancel
+  it, and `after-utility`. See [events.md](events.md).
+
+`drawerTools` runs for every drawer that has a gear — rows, columns, elements,
+containers and panes — so a plugin checks `kind` and adds nothing where its
+tool does not belong. A tool writes with `ge.setUtility(node, family, value,
+{ source: 'tool' })`, and the panel, the classes field and the preview follow.
+
+`onRefresh(scope)` runs whenever the preview is redrawn — on `init`, on a view
+change, after a write, after the user types in a classes field — with the node
+whose utilities changed, or the canvas. It is for what a plugin marks the canvas
+with beyond inline styles: the visibility plugin keeps hidden nodes on the
+canvas and fades them there. Whatever it adds, `onDeinit` takes away.
+
+### A panel of your own
+
+A field per family is the right panel for most plugins and the wrong one for
+some: spacing has fourteen families, and fourteen fields. Such a plugin marks
+its families `panel: false` and returns its own element from
+`panel(node, kind)` — or null where it does not apply — and the editor puts it
+in the Responsive section. Inside it, `ge.utilityField(node, family)` makes the
+same field the editor would, and the editor keeps every such field up to date
+with the view and the classes; swapping one field for another is the plugin's
+business. The spacing plugin's panel is a side and one field, and choosing a
+side swaps the field for that side's family.
+
+The same plugins tend to need the node as a whole for the preview, because
+their families settle one property between them — `p-3` and `pt-md-1` both
+set the top padding. A plugin-level `preview(node, kind, breakpoint)` is called
+for every node in a breakpoint view, after the families' own, and returns the
+styles for the node or an empty object.
+
+Two escape hatches, which the column width uses: `className(breakpoint,
+value)` spells the classes of a family that does not follow the pattern
+(`col`, `col-md`, `col-md-auto`), and `write(node, value, view, source)` does a
+write some other way than a utility change - the width field's writes are
+resizes, through the resize events. The editor still checks the value and the
+node before it calls `write`.
+
+Two plugins cannot declare the same family name: the second one is ignored,
+with a warning.
+
+Plugin options live in the `utilities` setting, under the plugin's name:
+`utilities: { spacing: { values: ['0', '2', '4'] } }`. The editor passes the
+setting through as it is; each plugin fills in its own defaults.
+

package/example/autocols.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+
+    <!-- The editor, and the sections plugin: equal and auto sizes and
+         columns per row are the editor's own, sections are a plugin -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script src="../dist/plugins/grideditor.sections.min.js"></script>
+
+    <script>
+        $(function() {
+            $('#myGrid').gridEditor({
+                content_types: [],
+
+                // Sizes are numbers, 'equal' (col) or 'auto' (col-auto), and a
+                // layout can be a row with columns per row
+                new_row_layouts: [
+                    [12], [6, 6], ['auto', 'equal'], ['equal', 'equal', 'equal'],
+                    { row_cols: { xs: 1, sm: 2, lg: 4 }, columns: 4 },
+                ],
+
+                default_view: 'lg',
+            });
+
+            // A width chosen anywhere - tools, edge, panel - is a resize
+            $('#myGrid').on('grideditor:after-resize', function(e, payload) {
+                $('#last').text('width at ' + payload.breakpoint + ': ' +
+                    (payload.from === null ? 'from the row' : payload.from) + ' → ' +
+                    (payload.to === null ? 'inherit' : payload.to) +
+                    (payload.cleared && payload.cleared.length ? ' (took off ' + payload.cleared.map(function(entry) {
+                        return entry.breakpoint;
+                    }).join(', ') + ')' : ''));
+            });
+
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            });
+        });
+    </script>
+
+    <title>Grid Editor column sizes and sections example</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+
+    <div class="container-fluid px-4">
+
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Column sizes, columns per row, and sections</h1>
+                <p class="form-text">
+                    <strong>Equal and auto.</strong> A column is a number of
+                    twelfths, <em>equal</em> (<code>col</code>: an equal share
+                    of what the row has left) or <em>auto</em>
+                    (<code>col-auto</code>: as wide as its content), at each
+                    breakpoint. Every size is in the <em>Width</em> field of a
+                    column's settings, under Responsive; the width tools and
+                    dragging an edge turn an equal or auto column into a
+                    number, starting from the width it has.
+                </p>
+                <p class="form-text">
+                    <strong>Columns per row.</strong> A row's
+                    <em>Columns per row</em> field shares the line out among
+                    the columns that have no size of their own. The second
+                    section's cards are one per line on phones, two on
+                    tablets, four on desktops.
+                </p>
+                <p class="form-text">
+                    <strong>Sections.</strong> Bootstrap's containers, grouping
+                    rows. Drag rows in and out of them, choose their width in
+                    their settings, and switch views to see each one as wide
+                    as its container would be. <strong>All sizes</strong>
+                    writes one class for every size.
+                </p>
+                <p class="form-text">Last width change: <span id="last">none yet</span></p>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="container">
+                <div class="row">
+                    <div class="col-auto">
+                        <h2 class="h5">Auto</h2>
+                        <p>As wide as this.</p>
+                    </div>
+                    <div class="col">
+                        <h2 class="h5">Equal</h2>
+                        <p>Takes what the auto column leaves.</p>
+                    </div>
+                    <div class="col-3">
+                        <h2 class="h5">Three</h2>
+                        <p>A fixed quarter.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container-lg">
+                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4">
+                    <div class="col"><h2 class="h6">Card one</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card two</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card three</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card four</h2><p>Shared out by the row.</p></div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-12">
+                    <h2 class="h5">A row outside any section</h2>
+                    <p>Full width of the canvas. Drag it into one of the sections above.</p>
+                </div>
+            </div>
+
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container-fluid -->
+
+</body>
+</html>

package/example/autosave.html

@@ -20,6 +20,11 @@
     <script src="../dist/jquery.grideditor.min.js"></script>
 </head>
 <body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
 <div class="container py-3">
     <h2>Grid Editor example - auto save and import/export</h2>
     <div class="mb-3">

package/example/basic.html

@@ -37,6 +37,11 @@
     <title>Grid Editor example</title>
 </head>
 <body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
 
     <div class="container">
         <div id="myGrid">

package/example/breakpoints.html

@@ -23,9 +23,10 @@
                 new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
                 content_types: [],
 
-                // The default: every size and offset change is written to all
-                // six breakpoints at once. Switch the dropdown to a single
-                // breakpoint to tune that one on its own.
+                // The default: a size or offset change is written once, as the
+                // class with no breakpoint, and replaces what the breakpoints
+                // said. Switch the dropdown to a single breakpoint to tune
+                // that one on its own.
                 default_view: 'all',
 
                 // A host that wants the old three-mode feel can offer three
@@ -41,6 +42,11 @@
     <title>Grid Editor breakpoints example</title>
 </head>
 <body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
 
     <div class="container">
 
@@ -50,8 +56,9 @@
                 <p class="form-text">
                     The dropdown on the right of the toolbar picks the layout
                     mode. In <strong>All sizes</strong> the canvas renders as
-                    the browser would, and the width and indent tools write
-                    every breakpoint at once. Pick a single breakpoint and the
+                    the browser would, and the width and indent tools write one
+                    class for every size (<code>col-4</code>), replacing what
+                    the breakpoints had. Pick a single breakpoint and the
                     canvas narrows to that tier's width, that tier's classes
                     become the effective ones whatever your window is doing,
                     and the tools write only that tier.

package/example/ckeditor.html

@@ -47,6 +47,11 @@
     <title>Grid Editor example</title>
 </head>
 <body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
 
     <div class="container">
         <div id="myGrid">

package/example/containers.html

@@ -70,6 +70,10 @@
     <title>Grid Editor containers example</title>
 </head>
 <body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
 
     <div class="container">
 

package/example/elements.html

@@ -89,6 +89,11 @@
     <title>Grid Editor elements example</title>
 </head>
 <body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
 
     <div class="container">