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

Skip to content

Commit b5cdcb2

Browse files
trooleetroolee
committed
extra CSS
1 parent 899fee3 commit b5cdcb2

File tree

6 files changed

+2095
-0
lines changed

6 files changed

+2095
-0
lines changed

‎README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ Inspired by [gridster.js](http://gridster.net). Built with love.
4949
- [Touch devices support](#touch-devices-support)
5050
- [Use with knockout.js](#use-with-knockoutjs)
5151
- [Change grid width](#change-grid-width)
52+
- [Extra CSS](#extra-css)
53+
- [Different grid widths](#different-grid-widths)
5254
- [Save grid to array](#save-grid-to-array)
5355
- [Load grid from array](#load-grid-from-array)
5456
- [Override resizable/draggable options](#override-resizabledraggable-options)
@@ -519,6 +521,25 @@ Here is a SASS code snipped which can make life easier (Thanks to @ascendantofra
519521
}
520522
```
521523

524+
Or you can include `gridstack-extra.css`. See below for more details.
525+
526+
## Extra CSS
527+
528+
There are few extra CSS batteries in `gridstack-extra.css` (`gridstack-extra.min.css`).
529+
530+
### Different grid widths
531+
532+
You can use other than 12 grid width:
533+
534+
```html
535+
<div class="grid-stack grid-stack-N">...</div>
536+
```
537+
```javascript
538+
$('.grid-stack').gridstack({width: N});
539+
```
540+
541+
See example: [2 grids demo](http://troolee.github.io/gridstack.js/demo/two.html)
542+
522543
## Save grid to array
523544

524545
Because gridstack doesn't track any kind of user-defined widget id there is no reason to make serialization to be part
@@ -646,6 +667,7 @@ Changes
646667

647668
#### v0.2.3 (development version)
648669

670+
- gridstack-extra.css
649671
- add support of lodash.js
650672
- add `is_area_empty` method
651673
- nested grids

‎demo/two.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!--[if lt IE 9]>
5+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
6+
<![endif]-->
7+
8+
<meta charset="utf-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<title>Float grid demo</title>
12+
13+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
14+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
15+
<link rel="stylesheet" href="../dist/gridstack.css"/>
16+
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
17+
18+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
19+
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
20+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
21+
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
22+
<script src="../dist/gridstack.js"></script>
23+
24+
<style type="text/css">
25+
#grid1 {
26+
background: lightgoldenrodyellow;
27+
}
28+
29+
#grid2 {
30+
background: lightcyan;
31+
}
32+
33+
.grid-stack-item-content {
34+
color: #2c3e50;
35+
text-align: center;
36+
background-color: #18bc9c;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<div class="container-fluid">
42+
<h1>Two grids demo</h1>
43+
44+
<div class="row">
45+
<div class="col-md-6">
46+
<div class="grid-stack grid-stack-6" id="grid1">
47+
</div>
48+
</div>
49+
<div class="col-md-6">
50+
<div class="grid-stack grid-stack-6" id="grid2">
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
56+
57+
<script type="text/javascript">
58+
$(function () {
59+
var options = {
60+
width: 6,
61+
float: true
62+
};
63+
$('#grid1').gridstack(options);
64+
$('#grid2').gridstack(options);
65+
66+
var items = [
67+
{x: 0, y: 0, width: 2, height: 2},
68+
{x: 3, y: 1, width: 1, height: 2},
69+
{x: 4, y: 1, width: 1, height: 1},
70+
{x: 2, y: 3, width: 3, height: 1},
71+
{x: 2, y: 5, width: 1, height: 1}
72+
];
73+
74+
$('.grid-stack').each(function () {
75+
var grid = $(this).data('gridstack');
76+
77+
_.each(items, function (node) {
78+
grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
79+
node.x, node.y, node.width, node.height);
80+
}, this);
81+
});
82+
});
83+
</script>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)