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

Skip to content

Commit 5735aae

Browse files
author
Alain Dumesny
committed
web page updates
* added a bulleted feature list (easier to see features) * added more demos (with index list - better to list than have nothing) * tune down add/remove buttons * Why use section
1 parent a0764e3 commit 5735aae

File tree

1 file changed

+49
-55
lines changed

1 file changed

+49
-55
lines changed

‎index.html

Lines changed: 49 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,31 @@
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
176+
layouts with just a few lines of code.<br>
177+
You can create more advanced grids: allow users to persist
183178
changes, create a sidebar of widgets to drag into your grid, and
184-
much, much more.
185-
</p>
179+
much, much more.<br><br>
180+
Features:
181+
</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&drop from sidebar</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>bootstrap-v4-friendly. external Angular, React, Knockout.js and more bindings</li>
192+
</ul>
186193
</div>
187194
</div>
188195
</div>
@@ -196,12 +203,7 @@ <h1 class="display-3 text-center">gridstack.js</h1>
196203
name="grid"
197204
style="font-size: 350%; margin-top: 10px"
198205
></ion-icon>
199-
<h1
200-
class="text-center"
201-
style="margin-top: 2rem; margin-bottom: 1.5rem;"
202-
>
203-
Basic Demo
204-
</h1>
206+
<h1>Basic Demo</h1>
205207
<hr />
206208
</div>
207209
</div>
@@ -356,12 +358,7 @@ <h1 class="display-3 text-center">gridstack.js</h1>
356358
class="float-right"
357359
style="font-size: 350%"
358360
></ion-icon>
359-
<h1
360-
class="text-center"
361-
style="margin-top: 2rem; margin-bottom: 1.5rem;"
362-
>
363-
Getting Started
364-
</h1>
361+
<h1>Getting Started</h1>
365362
<p>
366363
Create your first interactive grid by copy-pasting the HTML+JS, as seen below...
367364
</p>
@@ -406,12 +403,7 @@ <h3>Code</h3>
406403
name="grid"
407404
style="font-size: 350%; margin-top: 10px"
408405
></ion-icon>
409-
<h1
410-
class="text-center"
411-
style="margin-top: 2rem; margin-bottom: 1.5rem;"
412-
>
413-
Advanced Demo
414-
</h1>
406+
<h1>Advanced Demo</h1>
415407
<hr />
416408
</div>
417409
</div>
@@ -423,7 +415,7 @@ <h3>Code</h3>
423415
<div
424416
id="trash"
425417
style="padding: 15px; margin-bottom: 15px;"
426-
class="text-center bg-danger text-white"
418+
class="text-center text-white"
427419
>
428420
<div>
429421
<ion-icon name="trash" style="font-size: 400%"></ion-icon>
@@ -435,7 +427,7 @@ <h3>Code</h3>
435427
<div
436428
class="text-center card text-white newWidget grid-stack-item"
437429
>
438-
<div class="card-body bg-success grid-stack-item-content">
430+
<div class="card-body grid-stack-item-content">
439431
<div>
440432
<ion-icon
441433
name="add-circle"
@@ -609,13 +601,15 @@ <h3>Code</h3>
609601
name="desktop"
610602
class="float-right"
611603
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>
604+
></ion-icon>
605+
606+
<h1>Why use it</h1>
607+
<hr />
608+
<ul>
609+
<li><a href="https://www.npmjs.com/package/gridstack" target="_blank">npm downloads</a></li>
610+
<li><a href="https://www.formget.com/jquery-layout-plugins/" target="_blank">6 Best jQuery Layout Plugins 2019</a></li>
611+
</ul>
612+
<h1>Used by</h1>
619613
<hr />
620614
<div>
621615
<div class="logo">

0 commit comments

Comments
 (0)