Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ab6aae5

Browse files
author
Alain Dumesny
authored
Merge pull request gridstack#1058 from adumesny/gh-pages
web page updates
2 parents a0764e3 + 87a2a0c commit ab6aae5

File tree

2 files changed

+53
-56
lines changed

2 files changed

+53
-56
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
node_modules
22
bower_components
3-
coverage
3+
coverage
4+
dist
5+
*.tgz

‎index.html

Lines changed: 50 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,18 @@
3535
.grid-stack-item {
3636
border: 0;
3737
}
38-
39-
#demo h1,
40-
#getStarted h1 {
41-
font-size: 3rem;
38+
h1 {
39+
text-align: center;
40+
font-size: 3rem;
41+
margin-top: 2rem;
42+
margin-bottom: 1.5rem;
4243
}
43-
4444
.card {
4545
background: none;
4646
}
47-
4847
section {
4948
padding: 0 15px 0 15px;
5049
}
51-
5250
.grid-stack-item-removing {
5351
opacity: 0.8;
5452
filter: blur(5px);
@@ -61,7 +59,13 @@
6159
.logo {
6260
display: inline;
6361
margin-right: 15px;
64-
}
62+
}
63+
#trash {
64+
background-color: #cc6857 ;
65+
}
66+
.newWidget {
67+
background-color: #6cad84 ;
68+
}
6569
</style>
6670
</head>
6771

@@ -110,21 +114,12 @@
110114
>Examples</a
111115
>
112116
<div class="dropdown-menu" aria-labelledby="moreExamples">
113-
<a
114-
class="dropdown-item"
115-
target="_blank"
116-
href="demo/serialization.html"
117-
>Save and restore layout</a
118-
>
119-
<a class="dropdown-item" href="demo/nested.html" target="_blank"
120-
>Nested grids</a
121-
>
122-
<a class="dropdown-item" href="demo/two.html" target="_blank"
123-
>Drag widgets between two grids</a
124-
>
125-
<a class="dropdown-item" target="_blank" href="demo/anijs.html"
126-
>Animate widgets</a
127-
>
117+
<a class="dropdown-item" href="demo/serialization.html" target="_blank" >Save and restore layout</a>
118+
<a class="dropdown-item" href="demo/two.html" target="_blank">Drag widgets between two grids</a>
119+
<a class="dropdown-item" href="demo/nested.html" target="_blank">Nested grids</a>
120+
<a class="dropdown-item" href="demo/responsive.html" target="_blank">Responsive layout</a>
121+
<a class="dropdown-item" href="demo/anijs.html" target="_blank">Animate widgets</a>
122+
<a class="dropdown-item" href="demo/index.html" target="_blank">more...</a>
128123
</div>
129124
</li>
130125
<li class="nav-item">
@@ -170,19 +165,32 @@
170165
<div class="row bg-dark" id="hero">
171166
<div class="col-lg-12">
172167
<div class="jumbotron bg-dark text-white" style="margin-bottom: 0;">
173-
<h1 class="display-3 text-center">gridstack.js</h1>
168+
<h1 class="display-3">gridstack.js</h1>
174169
<p class="lead text-center">
175170
Build interactive dashboards in minutes.
176171
</p>
177172
<hr class="my-4" />
178173
<p>
179174
gridstack.js is a JS library designed to help developers create
180175
beautiful draggable, resizable, responsive bootstrap-friendly
181-
layouts with just a few lines of code. gridstack.js can even be
182-
used to create more advanced grids: allow users to persist
183-
changes, create a sidebar of widgets to drag into your grid, and
184-
much, much more.
176+
layouts with just a few lines of code.<br>
177+
You can create more advanced grids: allow users to persist
178+
changes, create a sidebar of widgets to drag into your grid, and
179+
much, much more.<br><br>
180+
Features:
185181
</p>
182+
<ul>
183+
<li>pure JS can be used in any UI framework</li>
184+
<li>mobile support</li>
185+
<li>draggable, resizable items</li>
186+
<li>drag'n'drop from sidebar to insert/delete</li>
187+
<li>responsive layouts</li>
188+
<li>save/restore</li>
189+
<li>drag between multiple grids</li>
190+
<li>nested grids</li>
191+
<li>plugin support for drag'n'drop (JQUI, with more to come...)</li>
192+
<li>bootstrap-v4-friendly. external Angular, React, Knockout.js and more bindings</li>
193+
</ul>
186194
</div>
187195
</div>
188196
</div>
@@ -196,12 +204,7 @@ <h1 class="display-3 text-center">gridstack.js</h1>
196204
name="grid"
197205
style="font-size: 350%; margin-top: 10px"
198206
></ion-icon>
199-
<h1
200-
class="text-center"
201-
style="margin-top: 2rem; margin-bottom: 1.5rem;"
202-
>
203-
Basic Demo
204-
</h1>
207+
<h1>Basic Demo</h1>
205208
<hr />
206209
</div>
207210
</div>
@@ -356,12 +359,7 @@ <h1 class="display-3 text-center">gridstack.js</h1>
356359
class="float-right"
357360
style="font-size: 350%"
358361
></ion-icon>
359-
<h1
360-
class="text-center"
361-
style="margin-top: 2rem; margin-bottom: 1.5rem;"
362-
>
363-
Getting Started
364-
</h1>
362+
<h1>Getting Started</h1>
365363
<p>
366364
Create your first interactive grid by copy-pasting the HTML+JS, as seen below...
367365
</p>
@@ -406,12 +404,7 @@ <h3>Code</h3>
406404
name="grid"
407405
style="font-size: 350%; margin-top: 10px"
408406
></ion-icon>
409-
<h1
410-
class="text-center"
411-
style="margin-top: 2rem; margin-bottom: 1.5rem;"
412-
>
413-
Advanced Demo
414-
</h1>
407+
<h1>Advanced Demo</h1>
415408
<hr />
416409
</div>
417410
</div>
@@ -423,7 +416,7 @@ <h3>Code</h3>
423416
<div
424417
id="trash"
425418
style="padding: 15px; margin-bottom: 15px;"
426-
class="text-center bg-danger text-white"
419+
class="text-center text-white"
427420
>
428421
<div>
429422
<ion-icon name="trash" style="font-size: 400%"></ion-icon>
@@ -435,7 +428,7 @@ <h3>Code</h3>
435428
<div
436429
class="text-center card text-white newWidget grid-stack-item"
437430
>
438-
<div class="card-body bg-success grid-stack-item-content">
431+
<div class="card-body grid-stack-item-content">
439432
<div>
440433
<ion-icon
441434
name="add-circle"
@@ -609,13 +602,15 @@ <h3>Code</h3>
609602
name="desktop"
610603
class="float-right"
611604
style="font-size: 350%"
612-
></ion-icon>
613-
<h1
614-
class="text-center"
615-
style="margin-top: 2rem; margin-bottom: 1.5rem;"
616-
>
617-
Used by
618-
</h1>
605+
></ion-icon>
606+
607+
<h1>Why use it</h1>
608+
<hr />
609+
<ul>
610+
<li><a href="https://www.npmjs.com/package/gridstack" target="_blank">npm downloads</a></li>
611+
<li><a href="https://www.formget.com/jquery-layout-plugins/" target="_blank">6 Best jQuery Layout Plugins 2019</a></li>
612+
</ul>
613+
<h1>Used by</h1>
619614
<hr />
620615
<div>
621616
<div class="logo">

0 commit comments

Comments
 (0)