screen.css

/* Welcome to Susy. Use this file to define screen styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
/* RESET STYLES */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline; }

*:focus {
  outline: 0; }

body {
  line-height: 1em;
  color: black;
  background: #fff; }

ol, ul {
  list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: "" ""; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: ""; }

img a {
  border: none; }

/* DEFAULTS */

/* links */

/* headers */

/* forms */






/* block tags */

ol {
  list-style: decimal;
  margin: 0 1.5em 1.5em 1.5em; }

ul {
  list-style: disc;
  margin: 0 1.5em 1.5em 1.5em; }


/* inline tags */

em {
  font-style: italic;
  line-height: .5; }

strong {
  font-weight: bold; }

ins {
  text-decoration: underline; }

del {
  text-decoration: line-through; }

/* replaced tags */

/* STRUCTURE */
body {
  text-align: center;
  font-size: 75%;
  line-height: 150%;
  background: #ccc; }

#page {
  overflow: hidden;
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: 81em;
  max-width: 100%;
  font-family: 'Futura Medium', 'Century Gothic', AppleGothic, sans-serif;
  background: #fff; }
  #page {
    display: block; }
  #page #brand {
    width: 79.012%;
    display: inline;
    float: left;
    margin-right: 1.235%;
    padding-left: 18.519%;
    margin-left: 1.235%;
    margin-right: 1.235%; }
    #page #brand h1 {
      font-size: 3em;
      line-height: 1em;
      font-weight: bold;
      margin: .5em 0; }
  #page #site-nav {
    width: 17.284%;
    display: inline;
    float: left;
    margin-right: 1.235%;
    margin-left: 1.235%;
    text-align: right; }
    #page #site-nav ul {
      margin: 0; }
      #page #site-nav ul li {
        list-style-type: none;
        margin-left: 0px; }
  #page #content {
    width: 79.012%;
    display: inline;
    float: left;
    margin-right: 1.235%;
    margin-right: 1.235%; }
    #page #content #main {
      width: 60.938%;
      display: inline;
      float: left;
      margin-right: 1.563%;
      margin-left: 0; }
      #page #content #main .article {
        overflow: hidden;
        display: inline-block;
        margin-bottom: 1.5em; }
        #page #content #main .article {
          display: block; }
        #page #content #main .article .header {
          width: 35.897%;
          display: inline;
          float: left;
          margin-right: 2.564%;
          margin-left: 0;
          text-align: right; }
        #page #content #main .article .body {
          width: 61.538%;
          display: inline;
          float: left;
          margin-right: 2.564%;
          margin-right: 0; }
        #page #content #main .article .footer {
          width: 61.538%;
          display: inline;
          float: left;
          margin-right: 2.564%;
          padding-left: 38.462%;
          margin-left: 0;
          margin-right: 0;
          color: #999; }
    #page #content #pull {
      width: 29.688%;
      display: inline;
      float: left;
      margin-right: 1.563%;
      padding-left: 7.813%;
      margin-right: 0; }
      #page #content #pull blockquote {
        font-family: 'Adobe Caslon Pro', 'Big Caslon', Garamond, 'Hoefler Text', 'Times New Roman', Times, serif;
        font-style: italic;
        font-size: 1.5em;
        line-height: 2em; }
  #page #site-info {
    width: 79.012%;
    display: inline;
    float: left;
    margin-right: 1.235%;
    padding: 1.5em 0;
    padding-left: 18.519%;
    margin-left: 1.235%;
    margin-right: 1.235%;
    background: #eee; }

screen.sass

/*
  Welcome to Susy. Use this file to define screen styles.
  Import this file using the following HTML or equivalent:
  <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />

@import base.sass

/* STRUCTURE
body
  +susy
  :background #ccc

#page
  +container
  +sans-family
  :background #fff
  #brand
    +columns(13)
    +prefix(3)
    +alpha
    +omega
    h1
      :font-size 3em
      :line-height 1em
      :font-weight bold
      :margin .5em 0
  #site-nav
    +columns(3)
    +alpha
    :text-align right
    ul
      +no-bullets
      :margin 0
  #content
    +columns(13)
    +omega
    #main
      +columns(8,13)
      +alpha(13)
      .article
        +clearfix
        :margin-bottom 1.5em
        .header
          +columns(3,8)
          +alpha(8)
          :text-align right
        .body
          +columns(5,8)
          +omega(8)
        .footer
          +columns(5,8)
          +prefix(3,8)
          +alpha(8)
          +omega(8)
          :color #999
    #pull
      +columns(4,13)
      +prefix(1,13)
      +omega(13)
      blockquote
        +serif-family
        :font-style italic
        :font-size 1.5em
        :line-height 2em
  #site-info
    +columns(13)
    :padding 1.5em 0
    +prefix(3)
    +alpha
    +omega
    :background #eee

susy_demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Susy Demo</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Eric Meyer">
	<!-- Date: 2009-07-18 -->
	<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" title="demo" charset="utf-8">
</head>
<body>
    <div id="page">
        <div id="brand" class="header">
            <h1>Hello Susy</h1>
        </div><!--/#brand-->
        <div id="site-nav" class="nav">
            <ul>
                <li><a href="#">These</a></li>
                <li><a href="#">links</a></li>
                <li><a href="#">go</a></li>
                <li><a href="#">nowhere</a></li>
            </ul>
        </div><!--/#site-av-->
        <div id="content" class="section">
            <div id="main" class="section">
                <div id="a1" class="article">
                    <div class="header">
                        <h2>An Article</h2>
                        <p>on the wonders of Susy</p>
                    </div><!--/.header-->
                    <div class="body">
                        <p>Volutpat ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis. Eodem modo typi qui nunc nobis videntur, parum clari fiant sollemnes in. Processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam littera.</p>

                        <p>Mirum est notare quam, littera gothica quam nunc putamus parum claram anteposuerit litterarum formas. Magna aliquam erat volutpat ut wisi; enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit.</p>

                        <p>Wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis. Mutationem consuetudium lectorum mirum est notare quam littera gothica. Illum dolore eu feugiat nulla facilisis at vero eros et accumsan et. Nam liber tempor cum soluta nobis, eleifend option congue nihil imperdiet doming id.</p>
                    </div><!--/.body-->
                    <div class="footer">
                        <p>posted July 24, 1982 by Eric Meyer</p>
                    </div><!--/.footer-->
                </div><!--/.article-->
                <div id="a2" class="article">
                    <div class="header">
                        <h2>An Article</h2>
                        <p>on the wonders of Susy</p>
                    </div><!--/.header-->
                    <div class="body">
                        <p>Volutpat ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis. Eodem modo typi qui nunc nobis videntur, parum clari fiant sollemnes in. Processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam littera.</p>

                        <p>Mirum est notare quam, littera gothica quam nunc putamus parum claram anteposuerit litterarum formas. Magna aliquam erat volutpat ut wisi; enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit.</p>

                        <p>Wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis. Mutationem consuetudium lectorum mirum est notare quam littera gothica. Illum dolore eu feugiat nulla facilisis at vero eros et accumsan et. Nam liber tempor cum soluta nobis, eleifend option congue nihil imperdiet doming id.</p>
                    </div><!--/.body-->
                    <div class="footer">
                        <p>posted July 24, 1982 by Eric Meyer</p>
                    </div><!--/.footer-->
                </div><!--/.article-->
            </div><!--/#main-->
            <div id="pull" class="aside">
                <blockquote>Such a beautiful pullquote, one wishes it was relevant. But alas, it is not.</blockquote>
            </div>
        </div><!--/#content-->
        <div id="site-info">
            <p>BDSM license or whatnot - the programmer thing. have your way with it.</p>
        </div><!--/#site-info-->
    </div><!--/#page-->
</body>
</html>