Skip to content

Instantly share code, notes, and snippets.

@brito

brito/dabblet.css

Created November 19, 2014 00:52
Show Gist options
  • Save brito/13434ea7591c2f7f1f03 to your computer and use it in GitHub Desktop.
Save brito/13434ea7591c2f7f1f03 to your computer and use it in GitHub Desktop.
Download ZIP
Base structure
Raw
dabblet.css
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
text-align: center;
}
.placeholder img {
display: inline-block;
/*border-radius: 50%;*/
border: 1px solid black;
width: 100px;
height:125px;
}
Raw
dabblet.html
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">< Children</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<!-- <form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form> -->
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<form class="">
<input type="text" class="form-control" placeholder="Search...">
</form>
<ul class="nav nav-sidebar">
<li ><a href="#">Overview </a></li>
<li ><a href="#">My Cases </a></li>
<li class="active"><a href="#">Children <span class="sr-only">(current)</span></a></li>
<li><a href="#">Dashboard</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Relocation</a></li>
<li><a href="">Home Visit</a></li>
<li><a href="">Safety Assessment</a></li>
<li><a href="">Child Abuse</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">About</a></li>
<li><a href="">Help</a></li>
<li><a href="">Feedback</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Sanchez, Jerry</h1>
<div class="row ">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Jerry Sanchez, 16</h4>
<span class="text-muted">UTAE0341422</span>
</div>
<div class="col-xs-6 col-sm-4 ">
<p> <b>Birthdate:</b> May 03, 1998<br />
<b>Race:</b> Hispanic/Latino<br />
<b>School:</b> Lincoln High School<br />
<b>Placement:</b> Jones Family<br />
<b>Open Cases:</b> 1<br /></p>
</div>
<div class="col-xs-6 col-sm-4 ">
<ul class="nav">
<li> <a href="#"><span class=" glyphicon glyphicon-list-alt" aria-hidden="true"></span> Safety Assessment <span class="label label-danger">overdue</span></a></li>
<li> <a href="#"><span class=" glyphicon glyphicon-home" aria-hidden="true"></span> Conduct Home Visit </a></li>
<li> <a href="#"><span class=" glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Report Abuse</a></li>
<li> <a href="#"><span class=" glyphicon glyphicon-pushpin" aria-hidden="true"></span> Request Relocation </a></li>
<li> <a href="#"><span class=" glyphicon glyphicon-briefcase" aria-hidden="true"></span> Request Medication </a></li>
</ul>
</div>
</div>
<h2 class="sub-header">Case History</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Type</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>3422</td>
<td>09/12/14</td>
<td>Relocation</td>
<td>Closed</td>
<td>Relocated to South Hill.</td>
</tr>
<tr>
<td>3155</td>
<td>09/01/14</td>
<td>Child Abuse</td>
<td>Pending</td>
<td>School provided visual proof.</td>
</tr>
<tr>
<td>4433</td>
<td>07/04/09</td>
<td>Placement</td>
<td>Closed</td>
<td>Jerry came into the State's care after...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment