Skip to content

Instantly share code, notes, and snippets.

@brandt1871

brandt1871/dabblet.css

Created March 12, 2014 04:30
Show Gist options
  • Save brandt1871/9500881 to your computer and use it in GitHub Desktop.
Save brandt1871/9500881 to your computer and use it in GitHub Desktop.
Download ZIP
My Dabblet
Raw
dabblet.css
/* My Dabblet */
/*
* The first commented line is your dabblet’s title
*/
/*
html {
position
margin
padding
width, min-width, max-width
height, min-height, max-height
float: none, center, right
clear: none, left, right, both
display: block, inline-block, inline, none
overflow: visible, hidden, scroll, auto
position: static, relative, absolute*, fixed*
*top-left, top-right, bottom-left, bottom-right
*left, right, top, bottom, full?
z-index
background
image
gradient
color
border (top, right, bottom, left)
style: none, solid, dashed, dotted
width
color
radius (top-left, top-right, bottom-left, bottom-right)
typography
font-family
font-weight
font-style: normal, italic
font-color
font-size
line-height
letter-spacing
text-indent
text-align: left, center, right, justify
text-decoration: none, underline, strikeout
text-transform: none, uppercase, capitalize, lowercase
direction: left-to-right, right-to-left
list-style: none, disc, square, decimal, lower-alpha, lower-roman
shadows
box-shadow
text-shadow
effects
opacity
transitions: linear, ease, ease-in, ease-out, ease-in % out
transforms: rotation, translate, scale
}
*/
body {
/* position */
margin: 0;
min-height: 100%;
/* background */
background-color: #fff;
}
header {
/* position */
padding : 1em 0 1em 0;
/* background */
background-color: #bcf;
}
.container {
/* position */
margin: 0 auto;
max-width: 960px;
/* typography */
text-align: center;
}
.row {
/* position */
margin: 0;
padding: 0;
}
.col-left {
/* position */
width: 49%;
display: inline-block;
/* typography */
text-align: left;
}
.col-right {
/* position */
width: 49%;
display: inline-block;
/* typograpgy */
text-align: right;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.company-name {
display: inline-block;
}
footer {
/* position */
padding: 1em 0;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
/* background */
background-color: #ddd;
}
.footer-p {
/* position */
margin: 0 1em;
display: inline-block;
vertical-align: middle;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<header>
<div class='container'>
<div class='row'>
<div class='col-left'>
<img class='logo' href='#' alt="Logo" width=40 height=40 />
<div class='company-name'>Uranus Designs</div>
</div>
<div class='col-right'>
<nav>
<a>Home</a>
<a>About</a>
<a>Contact Us</a>
</nav>
</div>
</div>
</div>
</header>
Welcome to my first true Dabblet!
<footer>
<div class='container'>
<p class='footer-p'>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
<p class='footer-p'>This document validates as CSS level 3</p>
</div>
</footer>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment