Merge pull request #3013 from adumesny/master

feat: column now uses var(--gs-column-width)

Author: adumesny

Gruntfile.js

@@ -21,7 +21,6 @@ module.exports = function(grunt) {
       dist: {
         files: {
           'dist/gridstack.css': 'src/gridstack.scss',
-          'dist/gridstack-extra.css': 'src/gridstack-extra.scss'
         }
       }
     },
@@ -33,7 +32,6 @@ module.exports = function(grunt) {
         },
         files: {
           'dist/gridstack.min.css': ['dist/gridstack.css'],
-          'dist/gridstack-extra.min.css': ['dist/gridstack-extra.css']
         }
       }
     },
@@ -42,7 +40,6 @@ module.exports = function(grunt) {
         files: {
           'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
-          'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
           'dist/angular/README.md': ['angular/README.md'],
           'dist/angular/src/gridstack.component.ts': ['angular/projects/lib/src/lib/gridstack.component.ts'],
           'dist/angular/src/gridstack-item.component.ts': ['angular/projects/lib/src/lib/gridstack-item.component.ts'],

README.md

@@ -32,7 +32,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
   - [Extend Library](#extend-library)
   - [Extend Engine](#extend-engine)
   - [Change grid columns](#change-grid-columns)
-  - [Custom columns CSS](#custom-columns-css)
+  - [Custom columns CSS (OLD, not needed with v12+)](#custom-columns-css-old-not-needed-with-v12)
   - [Override resizable/draggable options](#override-resizabledraggable-options)
   - [Touch devices support](#touch-devices-support)
 - [Migrating](#migrating)
@@ -48,6 +48,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
   - [Migrating to v9](#migrating-to-v9)
   - [Migrating to v10](#migrating-to-v10)
   - [Migrating to v11](#migrating-to-v11)
+  - [Migrating to v12](#migrating-to-v12)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [Usage Trend](#usage-trend)
@@ -207,6 +208,8 @@ GridStack makes it very easy if you need [1-12] columns out of the box (default
 GridStack.init( {column: N} );
 ```
 
+NOTE: step 2 is OLD and not needed with v12+ which uses CSS variables instead of classes
+
 2) also include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
@@ -219,7 +222,9 @@ Note: class `.grid-stack-N` will automatically be added and we include `gridstac
 
 See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
 
-## Custom columns CSS
+## Custom columns CSS (OLD, not needed with v12+)
+
+NOTE: step is OLD and not needed with v12+ which uses CSS variables instead of classes
 
 If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`.
 
@@ -491,6 +496,14 @@ GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {
 4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.
 5. support DOM gs- attr as well as gridstacknode JSON (see two.html) alternatives.
 
+## Migrating to v12
+
+* column and cell height code has been re-writen to use browser CSS variables, and we no longer need a tons of custom CSS classes!
+this fixes a long standing issue where people forget to include the right CSS for non 12 columns layouts, and a big speedup in many cases (many columns, or small cellHeight values).
+
+**Breaking change:**
+* `gridstack-extra.min.css` no longer exist, nor is custom column CSS needed. API/options hasn't changed.
+
 # jQuery Application
 
 This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before

angular/README.md

@@ -18,7 +18,6 @@ MyComponent CSS
 
 ```css
 @import "gridstack/dist/gridstack.min.css";
-@import "gridstack/dist/gridstack-extra.min.css"; // if you use 2-11 column
 
 .grid-stack {
   background: #fafad2;

angular/angular.json

@@ -55,7 +55,6 @@
             ],
             "styles": [
               "node_modules/gridstack/dist/gridstack.min.css",
-              "node_modules/gridstack/dist/gridstack-extra.min.css",
               "projects/demo/src/styles.css"
             ],
             "scripts": []
@@ -121,7 +120,6 @@
             ],
             "styles": [
               "node_modules/gridstack/dist/gridstack.min.css",
-              "node_modules/gridstack/dist/gridstack-extra.min.css",
               "projects/demo/src/styles.css"
             ],
             "scripts": []

angular/projects/demo/src/app/app.component.ts

@@ -56,7 +56,7 @@ export class AppComponent implements OnInit {
   // nested grid options
   private subOptions: GridStackOptions = {
     cellHeight: 50, // should be 50 - top/bottom
-    column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+    column: 'auto', // size to match container
     acceptWidgets: true, // will accept .grid-stack-item by default
     margin: 5,
   };

demo/column.html

@@ -7,7 +7,6 @@
   <title>Column grid demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>

demo/mobile.html

@@ -7,7 +7,6 @@
   <title>Simple mobile demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 
 </head>

demo/nested.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Nested grids demo</title>
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>

demo/nested_advanced.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Advance Nested grids demo</title>
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/> <!-- required for [2-11] column of sub-grids -->
   <!-- test using CSS rather than minRow -->
   <style type="text/css">
     .container-fluid > .grid-stack { min-height: 250px}
@@ -19,7 +18,6 @@ <h1>Advanced Nested grids demo</h1>
     <p>Create sub-grids (darker background) on the fly, by dragging items completely over others (nest) vs partially (push) using
       the new v7 API <code>GridStackOptions.subGridDynamic=true</code></p>
     <p>This will use the new delay drag&drop option <code>DDDragOpt.pause</code> to tell the gesture difference</p>
-    <p>Note: <code>gridstack-extra.min.css</code> is required for [2-11] column of sub-grids</p>
     <a class="btn btn-primary" onClick="addMainWidget()" href="#">Add Widget</a>
     <a class="btn btn-primary" onClick="addNewWidget(0)" href="#">Add W Grid0</a>
     <a class="btn btn-primary" onClick="addNewWidget(1)" href="#">Add W Grid1</a>
@@ -41,7 +39,7 @@ <h1>Advanced Nested grids demo</h1>
   <script type="text/javascript">
     let subOptions = {
       cellHeight: 50, // should be 50 - top/bottom
-      column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+      column: 'auto', // size to match container
       acceptWidgets: true, // will accept .grid-stack-item by default
       margin: 5,
       subGridDynamic: true, // make it recursive for all future sub-grids

demo/nested_constraint.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Constraint nested grids demo</title>
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
   <script src="../dist/gridstack-all.js"></script>
   <style type="text/css">
     .grid-stack-item.sub .grid-stack-item-content {
@@ -41,7 +40,7 @@ <h1>Constraint Nested grids demo</h1>
     [...sub1, ...sub2].forEach(d => d.content = String(count++));
     let subOptions = {
       cellHeight: 50,
-      column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+      column: 'auto', // size to match container
       itemClass: 'sub', // style sub items differently and use to prevent dragging in/out
       acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted
       margin: 2,