Skip to content

Instantly share code, notes, and snippets.

@AllenSH12

AllenSH12/jsbin.dujoj.html

Created March 1, 2014 08:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AllenSH12/9286891 to your computer and use it in GitHub Desktop.
Save AllenSH12/9286891 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.dujoj.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="left col">
<div class="header row">
<ul class="list-group" id="courseNavHeader">
<li class="list-group-item active" id="infoLink">
<p>Information</p>
</li>
<li class="list-group-item">
<input class="input" type="text" placeholder="Add Week">
</li>
</ul>
</div>
<div class="nav row scroll-y">
<ul class="list-group">
<li class="list-group-item">Week 1</li>
<li class="list-group-item">Week 2</li>
<li class="list-group-item">Week 3</li>
<li class="list-group-item">Week 4</li>
<li class="list-group-item">Week 5</li>
<li class="list-group-item">Week 6</li>
<li class="list-group-item">Week 7</li>
<li class="list-group-item">Week 8</li>
<li class="list-group-item">Week 9</li>
<li class="list-group-item">Week 10</li>
<li class="list-group-item">Week 11</li>
<li class="list-group-item">Week 12</li>
<li class="list-group-item">Week 13</li>
<li class="list-group-item">Week 14</li>
<li class="list-group-item">Week 15</li>
<li class="list-group-item">Week 16</li>
<li class="list-group-item">Week 17</li>
<li class="list-group-item">Week 18</li>
<li class="list-group-item">Week 19</li>
<li class="list-group-item">Week 20</li>
<li class="list-group-item">Week 21</li>
<li class="list-group-item">Week 22</li>
<li class="list-group-item">Week 23</li>
<li class="list-group-item">Week 24</li>
<li class="list-group-item">Week 25</li>
<li class="list-group-item">Week 26</li>
<li class="list-group-item">Week 27</li>
<li class="list-group-item">Week 28</li>
<li class="list-group-item">Week 29</li>
<li class="list-group-item">Week 30</li>
<li class="list-group-item">Week 31</li>
<li class="list-group-item">Week 32</li>
<li class="list-group-item">Week 33</li>
<li class="list-group-item">Week 34</li>
<li class="list-group-item">Week 35</li>
<li class="list-group-item">Week 36</li>
<li class="list-group-item">Week 37</li>
<li class="list-group-item">Week 38</li>
<li class="list-group-item">Week 39</li>
<li class="list-group-item">Week 40</li>
</ul>
</div>
</div>
<div class="right col">
<div class="body row scroll-y">
<div class="form-group">
<label class="input-label">Title</label>
<input type="text" class="input">
</div>
<label class="input-label">Description</label>
<textarea name="" id="" rows="5" class="input"></textarea>
</div>
<div class="footer row">
<button class="btn">Save</button>
</div>
</div>
</body>
</html>
Raw
jsbin.dujoj.less
/*
* http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
*/
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.left.col { width: 250px; border-right: 1px solid #ddd; }
.right.col { left: 250px; right: 0; }
.body.row { top: 0; bottom: 50px; padding: 5px; }
.footer.row { height: 50px; bottom: 0; line-height: 50px; }
.nav.row { top: 95px; bottom: 0; }
.header.row { height: 95px; border-bottom: 1px solid #ddd; }
/* Input styling */
.input {
display: block;
width: 100%;
padding: 7px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #ddd;
}
/* List styling */
.list-group {
margin: 0;
padding: 0;
list-style-type: none;
}
.list-group-item {
border-bottom: 1px solid #ddd;
padding: 10px 5px;
}
.list-group-item.active,
.list-group-item:hover {
background: #eee;
}
#infoLink {
p {
margin: 0;
}
}
.form-group {
margin-bottom: 6px;
}
.btn {
background: #fff;
padding: 5px 10px;
font-size: 16px;
min-width: 100px;
border-radius: 4px;
border: 1px solid #ddd;
}
.btn:hover {
background: #eee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment