Skip to content

Instantly share code, notes, and snippets.

<div class="container">
<div id="header">
<h1>Welcome to Compass!</h1>
<ul id="site-actions">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div id="navigation">
div#foo
font-style: italic
em, a
font-weight: bold
div#foo { font-style: italic; }
div#foo em, div#foo a { font-weight: bold; }
!attention_getting_color = #EBA933
h1
font-color = !attention_getting_color
.registration-box
background-color = !attention_getting_color
=enlarged-text
font-weight: bold
text-size: 15px
span.important
+enlarged-text
=hanging-indent(!indentation)
text-indent = -!indentation
padding-left = !indentation
=float-container
+clearfix
div
float: left
.clear
clear: both
div#widgets
+float-container
p.description
+hanging-indent(2em)
@import blueprint/screen.sass
@import blueprint/modules/scaffolding.sass
@import compass/reset.sass
+blueprint-typography("body.blueprint")
body.blueprint
+blueprint-scaffolding
.container
+container
body#index
#header
+column(24)
h1
:float left
#site-actions
:float right
+horizontal-list