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

Skip to content

web page updates #1058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 20, 2019
Merged

web page updates #1058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5735aae
web page updates
Nov 19, 2019
87a2a0c
gitignore update, tweaks
Nov 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
node_modules
bower_components
coverage
coverage
dist
*.tgz
105 changes: 50 additions & 55 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,18 @@
.grid-stack-item {
border: 0;
}

#demo h1,
#getStarted h1 {
font-size: 3rem;
h1 {
text-align: center;
font-size: 3rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
}

.card {
background: none;
}

section {
padding: 0 15px 0 15px;
}

.grid-stack-item-removing {
opacity: 0.8;
filter: blur(5px);
Expand All @@ -61,7 +59,13 @@
.logo {
display: inline;
margin-right: 15px;
}
}
#trash {
background-color: #cc6857 ;
}
.newWidget {
background-color: #6cad84 ;
}
</style>
</head>

Expand Down Expand Up @@ -110,21 +114,12 @@
>Examples</a
>
<div class="dropdown-menu" aria-labelledby="moreExamples">
<a
class="dropdown-item"
target="_blank"
href="demo/serialization.html"
>Save and restore layout</a
>
<a class="dropdown-item" href="demo/nested.html" target="_blank"
>Nested grids</a
>
<a class="dropdown-item" href="demo/two.html" target="_blank"
>Drag widgets between two grids</a
>
<a class="dropdown-item" target="_blank" href="demo/anijs.html"
>Animate widgets</a
>
<a class="dropdown-item" href="demo/serialization.html" target="_blank" >Save and restore layout</a>
<a class="dropdown-item" href="demo/two.html" target="_blank">Drag widgets between two grids</a>
<a class="dropdown-item" href="demo/nested.html" target="_blank">Nested grids</a>
<a class="dropdown-item" href="demo/responsive.html" target="_blank">Responsive layout</a>
<a class="dropdown-item" href="demo/anijs.html" target="_blank">Animate widgets</a>
<a class="dropdown-item" href="demo/index.html" target="_blank">more...</a>
</div>
</li>
<li class="nav-item">
Expand Down Expand Up @@ -170,19 +165,32 @@
<div class="row bg-dark" id="hero">
<div class="col-lg-12">
<div class="jumbotron bg-dark text-white" style="margin-bottom: 0;">
<h1 class="display-3 text-center">gridstack.js</h1>
<h1 class="display-3">gridstack.js</h1>
<p class="lead text-center">
Build interactive dashboards in minutes.
</p>
<hr class="my-4" />
<p>
gridstack.js is a JS library designed to help developers create
beautiful draggable, resizable, responsive bootstrap-friendly
layouts with just a few lines of code. gridstack.js can even be
used to create more advanced grids: allow users to persist
changes, create a sidebar of widgets to drag into your grid, and
much, much more.
layouts with just a few lines of code.<br>
You can create more advanced grids: allow users to persist
changes, create a sidebar of widgets to drag into your grid, and
much, much more.<br><br>
Features:
</p>
<ul>
<li>pure JS can be used in any UI framework</li>
<li>mobile support</li>
<li>draggable, resizable items</li>
<li>drag'n'drop from sidebar to insert/delete</li>
<li>responsive layouts</li>
<li>save/restore</li>
<li>drag between multiple grids</li>
<li>nested grids</li>
<li>plugin support for drag'n'drop (JQUI, with more to come...)</li>
<li>bootstrap-v4-friendly. external Angular, React, Knockout.js and more bindings</li>
</ul>
</div>
</div>
</div>
Expand All @@ -196,12 +204,7 @@ <h1 class="display-3 text-center">gridstack.js</h1>
name="grid"
style="font-size: 350%; margin-top: 10px"
></ion-icon>
<h1
class="text-center"
style="margin-top: 2rem; margin-bottom: 1.5rem;"
>
Basic Demo
</h1>
<h1>Basic Demo</h1>
<hr />
</div>
</div>
Expand Down Expand Up @@ -356,12 +359,7 @@ <h1 class="display-3 text-center">gridstack.js</h1>
class="float-right"
style="font-size: 350%"
></ion-icon>
<h1
class="text-center"
style="margin-top: 2rem; margin-bottom: 1.5rem;"
>
Getting Started
</h1>
<h1>Getting Started</h1>
<p>
Create your first interactive grid by copy-pasting the HTML+JS, as seen below...
</p>
Expand Down Expand Up @@ -406,12 +404,7 @@ <h3>Code</h3>
name="grid"
style="font-size: 350%; margin-top: 10px"
></ion-icon>
<h1
class="text-center"
style="margin-top: 2rem; margin-bottom: 1.5rem;"
>
Advanced Demo
</h1>
<h1>Advanced Demo</h1>
<hr />
</div>
</div>
Expand All @@ -423,7 +416,7 @@ <h3>Code</h3>
<div
id="trash"
style="padding: 15px; margin-bottom: 15px;"
class="text-center bg-danger text-white"
class="text-center text-white"
>
<div>
<ion-icon name="trash" style="font-size: 400%"></ion-icon>
Expand All @@ -435,7 +428,7 @@ <h3>Code</h3>
<div
class="text-center card text-white newWidget grid-stack-item"
>
<div class="card-body bg-success grid-stack-item-content">
<div class="card-body grid-stack-item-content">
<div>
<ion-icon
name="add-circle"
Expand Down Expand Up @@ -609,13 +602,15 @@ <h3>Code</h3>
name="desktop"
class="float-right"
style="font-size: 350%"
></ion-icon>
<h1
class="text-center"
style="margin-top: 2rem; margin-bottom: 1.5rem;"
>
Used by
</h1>
></ion-icon>

<h1>Why use it</h1>
<hr />
<ul>
<li><a href="https://www.npmjs.com/package/gridstack" target="_blank">npm downloads</a></li>
<li><a href="https://www.formget.com/jquery-layout-plugins/" target="_blank">6 Best jQuery Layout Plugins 2019</a></li>
</ul>
<h1>Used by</h1>
<hr />
<div>
<div class="logo">
Expand Down