<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple - Gridmanager Development</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/darkly/bootstrap.min.css" rel="stylesheet">
<link href="../dist/css/jquery.gridmanager-dark.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.js"></script>
<script src="../dist/js/jquery.gridmanager.js"></script>
</head>
<body>
<div class="container">
<div id="mycanvas">
<div class="row">
<div class="col-md-12">
<img src="http://placekitten.com/1140/250" class="img-responsive" />
<hr />
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Welcome to Gridmanager.js</h2>
</div>
<div class="col-md-6">
<p>Important bits:</p>
<div class="btn-group"><a href="https://github.com/neokoenig/jQuery-gridmanager/" class="btn btn-large btn-primary"><i class="fa fa-github fa-2x"></i> GitHub</a>
<a href="/jQuery-gridmanager/demo" class="btn btn-large btn-primary"><i class="fa fa-github fa-2x"></i> Demos</a>
<a href="/jQuery-gridmanager/docs" class="btn btn-large btn-primary"><i class="fa fa-github fa-2x"></i> Docs</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>0.3.1</h3>
<p>You can now have distinct editable regions - and you can have as many as you need. They're sortable, which is obviously cool. </p>
<p>Editable regions are stored with non-intrusive HTML comments</p>
<p>You don't need to go back through old markup and add them - if we don't see a comment in a column, we autowrap it. And don't worry, you can turn it off if you want.</p>
</div>
<div class="col-md-4">
<!--gm-editable-region-->
<h3>See? check this..</h3>
<!--/gm-editable-region-->
<!--gm-editable-region-->
<p>Thing One here!</p>
<!--/gm-editable-region-->
<!--gm-editable-region-->
<p>Thing Two here!</p>
<!--/gm-editable-region-->
<!--gm-editable-region-->
<p>Thing Three here! Try dragging me around. Regions are deletable as well as draggable.</p>
<!--/gm-editable-region-->
</div>
<div class="col-md-4">
<h3>Try adding a new region here by clicking the button above</h3>
<p>Psst, it looks like <i class="fa fa-edit"></i></p>
</div>
</div>
<div class="row">
<div class="column col-md-2 col-sm-2 col-xs-2">
<!--gm-editable-region--><img src="http://placekitten.com/300/250" class="img-responsive" /><!--/gm-editable-region-->
<!--gm-editable-region--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.</p><!--/gm-editable-region-->
</div>
<div class="column col-sm-12 col-xs-12 col-md-8">
<div class="row">
<div class="column col-sm-6 col-xs-6 col-md-9">
<!--gm-editable-region--><h3>Lots of nesting!!</h3><!--/gm-editable-region-->
<!--gm-editable-region--><p>Awesome. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.</p><!--/gm-editable-region-->
</div>
<div class="column col-sm-6 col-xs-6 col-md-3">
<!--gm-editable-region--><img src="http://placekitten.com/300/250" class="img-responsive" /><!--/gm-editable-region-->
<!--gm-editable-region--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. </p><!--/gm-editable-region-->
</div>
</div>
<div class="row">
<div class="column col-md-6 col-sm-6 col-xs-6">
<!--gm-editable-region--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.</p><!--/gm-editable-region-->
</div>
<div class="column col-md-6 col-sm-6 col-xs-6"><!--gm-editable-region--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.<br></p><!--/gm-editable-region-->
</div>
</div>
</div>
<div class="column col-md-2 col-sm-2 col-xs-2">
<!--gm-editable-region--><img src="http://placekitten.com/300/250" class="img-responsive" /><!--/gm-editable-region-->
<!--gm-editable-region--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum sollicitudin egestas. Donec mauris ipsum, iaculis bibendum lectus quis, pharetra vulputate nunc. Duis interdum odio quis iaculis malesuada. Morbi auctor nec felis id tincidunt. Phasellus sem leo, sagittis eu lorem at, lacinia viverra ligula. Pellentesque eget eros velit. Suspendisse venenatis cursus posuere. Morbi dictum neque eget lectus tristique, consequat volutpat lorem interdum. Pellentesque varius nisl a eros eleifend, in facilisis justo laoreet.</p><!--/gm-editable-region-->
</div>
</div>
</div>
</div>
<!--================== JS ================-->
<script>
$(document).ready(function(){
$("#mycanvas").gridmanager({
debug: 1}
);
});
</script>
</body>
</html>