Skip to content

Commit f65f0a0

Browse files
author
Alain Dumesny
committed
removed bootstrap from demos
* bootstrap .css and .js removed, other than two.html which uses column class * added simple demo.css for shared button/grid styles (one place) simplifies the includes a lot, focus on gridstack code
1 parent 6fb3d87 commit f65f0a0

File tree

10 files changed

+48
-133
lines changed

10 files changed

+48
-133
lines changed

‎demo/anijs.html‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,13 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<title>AniJS demo</title>
88

9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
109
<link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
11-
<link rel="stylesheet" href="../dist/gridstack.css"/>
10+
<link rel="stylesheet" href="demo.css"/>
1211

1312
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
14-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1513
<script src="../src/jquery-ui.min.js"></script>
1614
<script src="../src/gridstack.js"></script>
1715
<script src="../src/gridstack.jQueryUI.js"></script>
18-
19-
<style type="text/css">
20-
.grid-stack {
21-
background: lightgoldenrodyellow;
22-
}
23-
24-
.grid-stack-item-content {
25-
color: #2c3e50;
26-
text-align: center;
27-
background-color: #18bc9c;
28-
}
29-
</style>
3016
</head>
3117
<body>
3218
<div class="container-fluid">

‎demo/demo.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@import "../dist/gridstack.css";
2+
3+
.btn-primary {
4+
color: #fff;
5+
background-color: #007bff;
6+
}
7+
8+
.btn {
9+
display: inline-block;
10+
padding: .375rem .75rem;
11+
line-height: 1.5;
12+
border-radius: .25rem;
13+
}
14+
15+
a {
16+
text-decoration: none;
17+
}
18+
19+
h1 {
20+
font-size: 2.5rem;
21+
margin-bottom: .5rem;
22+
}
23+
24+
.grid-stack {
25+
background: lightgoldenrodyellow;
26+
}
27+
28+
.grid-stack-item-content {
29+
color: #2c3e50;
30+
text-align: center;
31+
background-color: #18bc9c;
32+
}

‎demo/float.html‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,12 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Float grid demo</title>
88

9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10-
<link rel="stylesheet" href="../dist/gridstack.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
1110

1211
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1412
<script src="../src/jquery-ui.min.js"></script>
1513
<script src="../src/gridstack.js"></script>
1614
<script src="../src/gridstack.jQueryUI.js"></script>
17-
18-
<style type="text/css">
19-
.grid-stack {
20-
background: lightgoldenrodyellow;
21-
}
22-
23-
.grid-stack-item-content {
24-
color: #2c3e50;
25-
text-align: center;
26-
background-color: #18bc9c;
27-
}
2815
</style>
2916
</head>
3017
<body>

‎demo/knockout.html‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,24 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Knockout.js demo</title>
88

9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10-
<link rel="stylesheet" href="../dist/gridstack.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
1110

1211
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1412
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
1513
<script src="../src/jquery-ui.min.js"></script>
1614
<script src="../src/gridstack.js"></script>
1715
<script src="../src/gridstack.jQueryUI.js"></script>
18-
19-
<style type="text/css">
20-
.grid-stack {
21-
background: lightgoldenrodyellow;
22-
}
23-
24-
.grid-stack-item-content {
25-
color: #2c3e50;
26-
text-align: center;
27-
background-color: #18bc9c;
28-
}
29-
</style>
3016
</head>
3117
<body>
3218
<div class="container-fluid">
3319
<h1>knockout.js Demo</h1>
34-
3520
<div>
36-
<button data-bind="click: addNewWidget">Add new widget</button>
21+
<a class="btn btn-primary" data-bind="click: addNewWidget">Add Widget</a>
3722
</div>
38-
3923
<br>
40-
4124
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
4225
</div>
4326

44-
4527
<script type="text/javascript">
4628
ko.components.register('dashboard-grid', {
4729
viewModel: {

‎demo/knockout2.html‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,24 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Knockout.js demo</title>
88

9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10-
<link rel="stylesheet" href="../dist/gridstack.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
1110

1211
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1412
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
1513
<script src="../src/jquery-ui.min.js"></script>
1614
<script src="../src/gridstack.js"></script>
1715
<script src="../src/gridstack.jQueryUI.js"></script>
18-
19-
<style type="text/css">
20-
.grid-stack {
21-
background: lightgoldenrodyellow;
22-
}
23-
24-
.grid-stack-item-content {
25-
color: #2c3e50;
26-
text-align: center;
27-
background-color: #18bc9c;
28-
}
29-
</style>
3016
</head>
3117
<body>
3218
<div class="container-fluid">
3319
<h1>knockout.js Demo</h1>
34-
3520
<div>
36-
<button data-bind="click: addNewWidget">Add new widget</button>
21+
<a class="btn btn-primary" data-bind="click: addNewWidget">Add Widget</a>
3722
</div>
38-
3923
<br>
40-
4124
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
4225
</div>
4326

44-
4527
<script type="text/javascript">
4628
ko.components.register('dashboard-grid', {
4729
viewModel: {

‎demo/nested.html‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,18 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Nested grids demo</title>
88

9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10-
<link rel="stylesheet" href="../dist/gridstack.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
1110

1211
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1412
<script src="../src/jquery-ui.min.js"></script>
1513
<script src="../src/gridstack.js"></script>
1614
<script src="../src/gridstack.jQueryUI.js"></script>
1715

1816
<style type="text/css">
19-
.grid-stack {
20-
background: lightgoldenrodyellow;
21-
}
22-
23-
.grid-stack-item-content {
24-
color: #2c3e50;
25-
text-align: center;
26-
background-color: #18bc9c;
27-
}
28-
2917
.grid-stack .grid-stack {
3018
/*margin: 0 -10px;*/
3119
background: rgba(255, 255, 255, 0.3);
3220
}
33-
3421
.grid-stack .grid-stack .grid-stack-item-content {
3522
background: lightpink;
3623
}

‎demo/responsive.html‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,13 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Responsive grid demo</title>
88

9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10-
<link rel="stylesheet" href="../dist/gridstack.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
1110
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1211

1312
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
14-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1513
<script src="../src/jquery-ui.min.js"></script>
1614
<script src="../src/gridstack.js"></script>
1715
<script src="../src/gridstack.jQueryUI.js"></script>
18-
19-
<style type="text/css">
20-
.grid-stack {
21-
background: lightgoldenrodyellow;
22-
}
23-
24-
.grid-stack-item-content {
25-
color: #2c3e50;
26-
text-align: center;
27-
background-color: #18bc9c;
28-
}
29-
</style>
3016
</head>
3117
<body>
3218
<div class="device-xs visible-xs"></div>

‎demo/right-to-left(rtl).html‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,26 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Right-To-Left (RTL) demo</title>
88

9-
<!-- TODO Note: bootstrap 4.3.1 seem to prevent our h1 tag and button from right aligning, so use older for now... -->
10-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
11-
<link rel="stylesheet" href="../dist/gridstack.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
10+
<style type="text/css">
11+
.grid-stack-item-content {
12+
text-align: right; /* override demo.css */
13+
}
14+
</style>
1215

1316
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
14-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1517
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
1618
<script src="../src/jquery-ui.min.js"></script>
1719
<script src="../src/gridstack.js"></script>
1820
<script src="../src/gridstack.jQueryUI.js"></script>
19-
20-
<style type="text/css">
21-
.grid-stack {
22-
background: lightgoldenrodyellow;
23-
}
24-
25-
.grid-stack-item-content {
26-
color: #2c3e50;
27-
background-color: #18bc9c;
28-
}
29-
</style>
3021
</head>
3122
<body>
3223
<div class="container-fluid">
3324
<h1>RTL Demo</h1>
34-
3525
<div>
36-
<button data-bind="click: addNewWidget">Add new widget</button>
26+
<a class="btn btn-primary" data-bind="click: addNewWidget">Add Widget</a>
3727
</div>
38-
3928
<br>
40-
4129
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
4230
</div>
4331

‎demo/serialization.html‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,12 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Serialization demo</title>
88

9-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10-
<link rel="stylesheet" href="../dist/gridstack.css"/>
9+
<link rel="stylesheet" href="demo.css"/>
1110

1211
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1412
<script src="../src/jquery-ui.min.js"></script>
1513
<script src="../src/gridstack.js"></script>
1614
<script src="../src/gridstack.jQueryUI.js"></script>
17-
18-
<style type="text/css">
19-
.grid-stack {
20-
background: lightgoldenrodyellow;
21-
}
22-
23-
.grid-stack-item-content {
24-
color: #2c3e50;
25-
text-align: center;
26-
background-color: #18bc9c;
27-
}
28-
</style>
2915
</head>
3016
<body>
3117
<div class="container-fluid">

‎demo/two.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1212

1313
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
14-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
1514
<script src="../src/jquery-ui.min.js"></script>
1615
<script src="../src/gridstack.js"></script>
1716
<script src="../src/gridstack.jQueryUI.js"></script>

0 commit comments

Comments
 (0)