Skip to content

Commit 9a2776e

Browse files
adumesnyadumesny
committed
feat: column now uses var(--gs-column-width)
* switch column to CSS var * removed all custom classes and `gridstack-extra.css` * This resolve a long standing issue where people didn't include the right/extra css for non 12 column layouts.
1 parent 7043258 commit 9a2776e

37 files changed

+214
-268
lines changed

‎Gruntfile.js

-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ module.exports = function(grunt) {
2121
dist: {
2222
files: {
2323
'dist/gridstack.css': 'src/gridstack.scss',
24-
'dist/gridstack-extra.css': 'src/gridstack-extra.scss'
2524
}
2625
}
2726
},
@@ -33,7 +32,6 @@ module.exports = function(grunt) {
3332
},
3433
files: {
3534
'dist/gridstack.min.css': ['dist/gridstack.css'],
36-
'dist/gridstack-extra.min.css': ['dist/gridstack-extra.css']
3735
}
3836
}
3937
},
@@ -42,7 +40,6 @@ module.exports = function(grunt) {
4240
files: {
4341
'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
4442
'dist/src/gridstack.scss': ['src/gridstack.scss'],
45-
'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
4643
'dist/angular/README.md': ['angular/README.md'],
4744
'dist/angular/src/gridstack.component.ts': ['angular/projects/lib/src/lib/gridstack.component.ts'],
4845
'dist/angular/src/gridstack-item.component.ts': ['angular/projects/lib/src/lib/gridstack-item.component.ts'],

‎README.md

+15-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
3232
- [Extend Library](#extend-library)
3333
- [Extend Engine](#extend-engine)
3434
- [Change grid columns](#change-grid-columns)
35-
- [Custom columns CSS](#custom-columns-css)
35+
- [Custom columns CSS (OLD, not needed with v12+)](#custom-columns-css-old-not-needed-with-v12)
3636
- [Override resizable/draggable options](#override-resizabledraggable-options)
3737
- [Touch devices support](#touch-devices-support)
3838
- [Migrating](#migrating)
@@ -48,6 +48,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
4848
- [Migrating to v9](#migrating-to-v9)
4949
- [Migrating to v10](#migrating-to-v10)
5050
- [Migrating to v11](#migrating-to-v11)
51+
- [Migrating to v12](#migrating-to-v12)
5152
- [jQuery Application](#jquery-application)
5253
- [Changes](#changes)
5354
- [Usage Trend](#usage-trend)
@@ -207,6 +208,8 @@ GridStack makes it very easy if you need [1-12] columns out of the box (default
207208
GridStack.init( {column: N} );
208209
```
209210

211+
NOTE: step 2 is OLD and not needed with v12+ which uses CSS variables instead of classes
212+
210213
2) also include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
211214
```html
212215
<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
219222

220223
See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
221224

222-
## Custom columns CSS
225+
## Custom columns CSS (OLD, not needed with v12+)
226+
227+
NOTE: step is OLD and not needed with v12+ which uses CSS variables instead of classes
223228

224229
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"]`.
225230

@@ -491,6 +496,14 @@ GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {
491496
4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.
492497
5. support DOM gs- attr as well as gridstacknode JSON (see two.html) alternatives.
493498
499+
## Migrating to v12
500+
501+
* 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!
502+
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).
503+
504+
**Breaking change:**
505+
* `gridstack-extra.min.css` no longer exist, nor is custom column CSS needed. API/options hasn't changed.
506+
494507
# jQuery Application
495508
496509
This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before

‎angular/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ MyComponent CSS
1818

1919
```css
2020
@import "gridstack/dist/gridstack.min.css";
21-
@import "gridstack/dist/gridstack-extra.min.css"; // if you use 2-11 column
2221

2322
.grid-stack {
2423
background: #fafad2;

‎angular/angular.json

-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
],
5656
"styles": [
5757
"node_modules/gridstack/dist/gridstack.min.css",
58-
"node_modules/gridstack/dist/gridstack-extra.min.css",
5958
"projects/demo/src/styles.css"
6059
],
6160
"scripts": []
@@ -121,7 +120,6 @@
121120
],
122121
"styles": [
123122
"node_modules/gridstack/dist/gridstack.min.css",
124-
"node_modules/gridstack/dist/gridstack-extra.min.css",
125123
"projects/demo/src/styles.css"
126124
],
127125
"scripts": []

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

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

‎demo/column.html

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<title>Column grid demo</title>
88

99
<link rel="stylesheet" href="demo.css"/>
10-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1110
<script src="../dist/gridstack-all.js"></script>
1211
</head>
1312
<body>

‎demo/mobile.html

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<title>Simple mobile demo</title>
88

99
<link rel="stylesheet" href="demo.css"/>
10-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1110
<script src="../dist/gridstack-all.js"></script>
1211

1312
</head>

‎demo/nested.html

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Nested grids demo</title>
88
<link rel="stylesheet" href="demo.css"/>
9-
<link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
109
<script src="../dist/gridstack-all.js"></script>
1110
</head>
1211
<body>

‎demo/nested_advanced.html

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

‎demo/nested_constraint.html

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

‎demo/old_nested-jq.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Nested JQuery grids demo (old v5.1.1) which never worked fully</title>
88
<link rel="stylesheet" href="demo.css"/>
9-
<link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
109
<script src="https://cdn.jsdelivr.net/npm/gridstack@5.1.1/dist/gridstack-jq.js"></script>
1110
<style type="text/css">
1211
/* make nested grids have slightly darker bg */
@@ -57,7 +56,7 @@ <h1>Nested JQuery grids demo</h1>
5756
[...sub1, ...sub2].forEach(d => d.content = String(count++));
5857
let subOptions = {
5958
cellHeight: 50, // should be 50 - top/bottom
60-
column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
59+
column: 'auto', // size to match container
6160
acceptWidgets: true, // will accept .grid-stack-item by default
6261
margin: 5,
6362
draggable: {

‎demo/old_two-jq.html

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="demo.css"/>
11-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1211

1312
<script src="https://cdn.jsdelivr.net/npm/gridstack@5.1.1/dist/gridstack-jq.js"></script>
1413
</head>

‎demo/react-hooks-controlled-multiple.html

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Gridstack.js React integration example</title>
88
<link rel="stylesheet" href="demo.css" />
9-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
109
<script src="../dist/gridstack-all.js"></script>
1110

1211
<!-- Scripts to use react inside html - DEVELOPMENT FILES -->

‎demo/responsive.html

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<title>Responsive column</title>
55

66
<link rel="stylesheet" href="demo.css"/>
7-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
87
<script src="../dist/gridstack-all.js"></script>
98
</head>
109
<body>

‎demo/responsive_break.html

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<title>Responsive breakpoint</title>
55

66
<link rel="stylesheet" href="demo.css"/>
7-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
87
<script src="../dist/gridstack-all.js"></script>
98
</head>
109
<body>

‎demo/responsive_none.html

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<title>Responsive layout:'none'</title>
88

99
<link rel="stylesheet" href="demo.css"/>
10-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1110
<script src="../dist/gridstack-all.js"></script>
1211

1312
</head>

‎demo/sizeToContent.html

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<title>sizeToContent demo</title>
88

99
<link rel="stylesheet" href="demo.css"/>
10-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1110
<script src="../dist/gridstack-all.js"></script>
1211
<style type="text/css">
1312
.grid-stack-item-content {

‎demo/two.html

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="demo.css"/>
11-
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1211
<style type="text/css">
1312
.with-lines { border: 1px dotted #777}
1413
</style>

‎doc/CHANGES.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8-
- [11.5.0-dev (TBD)](#1150-dev-tbd)
8+
- [12-dev (TBD)](#12-dev-tbd)
99
- [11.5.1 (2025-03-23)](#1151-2025-03-23)
1010
- [11.5.0 (2025-03-16)](#1150-2025-03-16)
1111
- [11.4.0 (2025-02-27)](#1140-2025-02-27)
@@ -123,8 +123,9 @@ Change log
123123
- [v0.1.0 (2014-11-18)](#v010-2014-11-18)
124124

125125
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
126-
## 11.5.0-dev (TBD)
126+
## 12-dev (TBD)
127127
* feat: [#2854](https://github.com/gridstack/gridstack.js/pull/2854) Removed dynamic stylesheet and migrated to CSS vars. Thank you [lmartorella](https://github.com/lmartorella)
128+
* feat: [#3013](https://github.com/gridstack/gridstack.js/pull/3013) columns no longer require custom classes nor `gridstack-extra.css` as we now use CSS vars.
128129

129130
## 11.5.1 (2025-03-23)
130131
* revert: [#2981](https://github.com/gridstack/gridstack.js/issues/2981) Locked was incorrectly changed. fixed doc instead

‎doc/README.md

-2
Original file line numberDiff line numberDiff line change
@@ -405,8 +405,6 @@ Gets current cell width (grid width / # of columns).
405405

406406
set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
407407
as well as cache the original layout so you can revert back to previous positions without loss.
408-
Requires `gridstack-extra.css` (or minimized version) for [2-11],
409-
else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
410408

411409
- `column` - Integer > 0 (default 12)
412410
- `layout` - specify the type of re-layout that will happen (position, size, etc...). Values are: `'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);`

‎react/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
GridStackRenderProvider,
2121
} from "path/to/lib";
2222
import "gridstack/dist/gridstack.css";
23-
import "gridstack/dist/gridstack-extra.css";
2423
import "path/to/demo.css";
2524

2625
function Text({ content }: { content: string }) {

‎react/src/demo/demo.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
useGridStackContext,
1010
} from "../../lib";
1111

12-
import "gridstack/dist/gridstack-extra.css";
1312
import "gridstack/dist/gridstack.css";
1413
import "./demo.css";
1514

‎react/src/main.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { StrictMode } from 'react'
33
import { createRoot } from 'react-dom/client'
44

5-
import 'gridstack/dist/gridstack-extra.css';
65
import 'gridstack/dist/gridstack.css';
76

87
import App from './App.tsx'

‎spec/e2e/html/1571_drop_onto_full.html

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="../../../demo/demo.css"/>
1111
<script src="../../../dist/gridstack-all.js"></script>
12-
<link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
1312

1413
<style type="text/css">
1514
.grid-stack-item-removing {

‎spec/e2e/html/1785_column_many_switch.html

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<title>Changing Column a lot</title>
88

99
<link rel="stylesheet" href="../../../demo/demo.css"/>
10-
<link rel="stylesheet" href="../../../dist/gridstack-extra.min.css"/>
1110
<script src="../../../dist/gridstack-all.js"></script>
1211

1312
</head>

‎spec/e2e/html/2384_update_content.html

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<head>
33
<title>Nested grid update content</title>
44
<link rel="stylesheet" href="../../../demo/demo.css"/>
5-
<link rel="stylesheet" href="../../../dist/gridstack-extra.min.css"/>
65
<style type="text/css">
76
.grid-stack {
87
background: lightgoldenrodyellow;

‎spec/e2e/html/2394_save_sub_item_moved.html

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<title>#2394 Save sub item moved</title>
88

99
<link rel="stylesheet" href="../../../demo/demo.css" />
10-
<link rel="stylesheet" href="../../../dist/gridstack-extra.min.css"/>
1110
<script src="../../../dist/gridstack-all.js"></script>
1211

1312
</head>

‎spec/e2e/html/2406_inf_loop_autoPosition_column1.html

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<title>Float grid demo</title>
99

1010
<link rel="stylesheet" href="../../../demo/demo.css" />
11-
<link rel="stylesheet" href="../../../dist/gridstack-extra.css" />
1211
<script src="../../../dist/gridstack-all.js"></script>
1312

1413
</head>

‎spec/e2e/html/2453 _recreated_trash.html

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="../../../demo/demo.css" />
11-
<link rel="stylesheet" href="../../../dist/gridstack-extra.css" />
1211
<script src="../../../dist/gridstack-all.js"></script>
1312
<style type="text/css">
1413
.with-lines { border: 1px dotted #777}

‎spec/e2e/html/2576_insert_column_shift_content.html

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<title>Column insert bug #2576</title>
99
<link rel="stylesheet" href="../../../demo/demo.css" />
1010
<script src="../../../dist/gridstack-all.js"></script>
11-
<link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
1211
</head>
1312

1413
<body>

‎spec/e2e/html/2864_nested_resize_reflow.html

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>2864 nest grid resize</title>
88
<link rel="stylesheet" href="../../../demo/demo.css"/>
9-
<link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
109
<script src="../../../dist/gridstack-all.js"></script>
1110
</head>
1211
<body>

0 commit comments

Comments
 (0)