Skip to content

Instantly share code, notes, and snippets.

@joelip

joelip/colloquiate_home.html

Created June 6, 2012 22:29
Show Gist options
  • Save joelip/2885228 to your computer and use it in GitHub Desktop.
Save joelip/2885228 to your computer and use it in GitHub Desktop.
Download ZIP
Colloquiate Wireframe User home
Raw
colloquiate_home.html
<body>
<header></header>
<aside>
<div id="profphoto">Photo</div>
</aside>
<section>
<nav>Theoretical Nav Bar for Docs</nav>
<section id="wrapper">
<ul>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
</ul>
</section>
</section>
<footer>
</footer>
Raw
dabblet.css
/* Colloquiate Wireframe User home */
/* colors
black: #000
grey: #666
light grey: #c0c0c0
*/
/* border reference
border: [size px] [line type (solid etc)] [color];
*/
body {
width: 1200px;
height: 100%;
margin: 0 auto 0 auto;
display: block;
font-family: helvetica, arial, ans-serif;
}
header {
width: 100%;
height: 50px;
background-color: #000;
margin: 0px 0px 8px 0px;
}
/* side bar content */
aside {
width: 27%;
height: 800px;
float: left;
background-color: #666;
margin: 0px 8px 8px 0px;
}
aside > #profphoto {
width: 80px;
height: 80px;
background-color: #c0c0c0;
margin: 30px auto 10px auto;
text-align: center;
}
/* document browser content */
section {
width: 72%;
height: 800px;
float: right;
background-color: #666;
margin:0px 0px 0px 0px;
}
section > nav {
width: 98%;
height: 80px;
background-color: #c0c0c0;
margin: 10px auto 10px auto;
border: 2px dashed #000;
text-align: center;
}
#wrapper {
width: 99%;
height: 690px;
background-color: #666;
border: 2px dashed black;
overflow-y: scroll;
}
#wrapper > ul {
list-style: none;
}
#wrapper > ul > li {
float: left;
margin: 0px 0px 75px 50px;
}
#docbox {
width: 92px;
height: 120px;
background-color: #c0c0c0;
}
#docboxleft {
width: 92px;
height: 120px;
background-color: #c0c0c0;
margin: 0px 0px 0px 0px;
}
/* footer content */
footer {
width: 100%;
height: 75px;
background-color: #000;
margin: 0px 0px 10px 0px;
float: left;
}
Raw
dabblet.html
<body>
<header></header>
<aside>
<div id="profphoto">Photo</div>
</aside>
<section>
<nav>Theoretical Nav Bar for Docs</nav>
<section id="wrapper">
<ul>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docboxleft"></li>
<li id="docbox"></li>
<li id="docbox"></li>
<li id="docbox"></li>
</ul>
</section>
</section>
<footer>
</footer>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment