Skip to content

Commit 4562d80

Browse files
adumesnyadumesny
committed
removed CDN examples - use npm packaging instead
1 parent 1fa0db0 commit 4562d80

File tree

1 file changed

+28
-51
lines changed

1 file changed

+28
-51
lines changed

‎README.md‎

Lines changed: 28 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
gridstack.js
2-
============
1+
# gridstack.js
32

43
[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack)
54
[![Dependency Status](https://david-dm.org/gridstack/gridstack.js.svg)](https://david-dm.org/gridstack/gridstack.js)
@@ -39,29 +38,24 @@ Join us on Slack: https://gridstackjs.troolee.com
3938
- [Custom columns CSS](#custom-columns-css)
4039
- [Override resizable/draggable options](#override-resizabledraggable-options)
4140
- [Touch devices support](#touch-devices-support)
42-
- [Migrating to v0.6](#migrating-to-v06)
43-
- [Migrating to v1](#migrating-to-v1)
44-
- [jQuery Application](#jquery-application)
45-
- [Migrating to v2](#migrating-to-v2)
41+
- [Migrating to v0.6](#migrating-to-v06)
42+
- [Migrating to v1](#migrating-to-v1)
43+
- [Migrating to v2](#migrating-to-v2)
44+
- [jQuery Application](#jquery-application)
4645
- [Changes](#changes)
4746
- [The Team](#the-team)
4847

4948
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
5049

5150

52-
Demo and examples
53-
====
51+
# Demo and examples
5452

5553
Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/)
5654

5755

58-
Usage
59-
=====
56+
# Usage
6057

6158
## Install
62-
63-
* Using yarn / npm:
64-
6559
[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack)
6660

6761
```js
@@ -76,32 +70,16 @@ ES6 or Typescript
7670

7771
```js
7872
import { GridStack } from 'gridstack';
79-
import 'gridstack/dist/gridstack.css';
80-
```
81-
82-
legacy javascript. If you need to import individual files (see [jquery apps](#jquery-application) section)
83-
84-
```js
85-
import 'gridstack/dist/gridstack.all.js';
86-
import 'gridstack/dist/gridstack.css';
73+
import 'gridstack/dist/gridstack.min.css';
8774
```
8875

8976
alternatively in html
9077

9178
```html
92-
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.min.css" />
79+
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
9380
<script src="node_modules/gridstack/dist/gridstack.all.js"></script>
9481
```
9582

96-
or using CDN (minimized):
97-
98-
```html
99-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.2.0/dist/gridstack.min.css" />
100-
<script src="https://cdn.jsdelivr.net/npm/gridstack@2.2.0/dist/gridstack.all.js"></script>
101-
```
102-
103-
.map files are included for debugging purposes.
104-
10583
## Basic usage
10684

10785
creating items dynamically...
@@ -149,7 +127,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example
149127

150128
## Requirements
151129

152-
GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.css` (layouts are done using CSS column based %).
130+
GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.min.css` (layouts are done using CSS column based %).
153131

154132
## API Documentation
155133

@@ -177,11 +155,11 @@ grid.printCount();
177155
search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
178156

179157
- vue.js: see [demo v3](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue3js.html) or [demo v2](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue2js.html)
158+
- React: [react gridstack example](https://github.com/Inder2108/react-gridstack-example)
180159
- ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
160+
- Angular9: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance. recommend for concept ONLY. Working on creating an Angular wrapper as that is we use ourself...
181161
- AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
182-
- Angular8: [lb-gridstack](https://github.com/pfms84/lb-gridstack)
183162
- Rails: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
184-
- React: [react-gridstack](https://github.com/pitrho/react-gridstack)
185163

186164
## Change grid columns
187165

@@ -194,12 +172,12 @@ GridStack.init( {column: N} );
194172

195173
2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
196174
```html
197-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.2.0/dist/gridstack-extra.css"/>
175+
<link href="node_modules/gridstack/dist/gridstack-extra.css" rel="stylesheet"/>
198176

199177
<div class="grid-stack grid-stack-N">...</div>
200178
```
201179

202-
Note: we added `grid-stack-N` class and `gridstack-extra.css` which defines CSS for grids with custom [1-12] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
180+
Note: we added `.grid-stack-N` and include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
203181

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

@@ -300,11 +278,11 @@ GridStack.init(options);
300278
If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
301279

302280

303-
## Migrating to v0.6
281+
# Migrating to v0.6
304282

305283
starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added|removed` [events](https://github.com/gridstack/gridstack.js/tree/develop/doc#events) if you didn't and relied on the old broken behavior.
306284

307-
## Migrating to v1
285+
# Migrating to v1
308286

309287
v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
310288

@@ -355,15 +333,7 @@ Other changes
355333
356334
Recommend looking at the [many samples](./demo) for more code examples.
357335
358-
### jQuery Application
359-
360-
We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring your own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
361-
362-
Note: v2.0.0 does not currently support importing GridStack Drag&Drop without also including our jquery + jqueryui. Still trying to figure how to make that bundle possible. You will have to use 1.x
363-
364-
As for events, you can still use `$(".grid-stack").on(...)` while jqueryui is used internally for things we don't support, but recommended you don't as that will get dropped at some point.
365-
366-
## Migrating to v2
336+
# Migrating to v2
367337
368338
make sure to read v1 migration first!
369339
@@ -386,13 +356,20 @@ v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes a
386356
387357
**Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x
388358
389-
Changes
390-
=====
359+
# jQuery Application
360+
361+
We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring your own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
362+
363+
Note: v2.0.0 does not currently support importing GridStack Drag&Drop without also including our jquery + jqueryui. Still trying to figure how to make that bundle possible. You will have to use 1.x
364+
365+
As for events, you can still use `$(".grid-stack").on(...)` while jqueryui is used internally for things we don't support, but recommended you don't as that will get dropped at some point.
366+
367+
368+
# Changes
391369
392370
View our change log [here](https://github.com/gridstack/gridstack.js/tree/develop/doc/CHANGES.md).
393371
394372
395-
The Team
396-
========
373+
# The Team
397374
398375
gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny) and [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.

0 commit comments

Comments
 (0)