mirisuzanne/_base.sass

## _base.sass
//**
//  Susy: Elastic-Fluid grids without all the math
//  by Eric Meyer and OddBird Collective
//  http://www.oddbird.net
//**


/* RESET STYLES
@import compass/reset.sass


//**
  GRID
  un-comment and override these values as needed for your grid layout
  (defaults are shown)
!grid_unit = "em"
!total_cols = 10
!col_width = 5
!gutter_width = 2
!side_gutter_width = 1

//**
  FONT-SIZE
  un-comment and override these values as needed (defaults are shown)
  - you set the font and line heights in pixels.
  - Susy will do the math and give you !base_font_size and !base_line_height
    variables, set flexibly against the common browser default of 16px
!base_font_size_px = 14
!base_line_height_px = 21

// SUSY
//  (don't move this @import above the GRID and FONT-SIZE overrides)
@import susy/susy.sass


// COLORS
// set any colors you will need later
!text = #332016
!light = #CC8866
!links = #4CAAC0

// FONTS
// Give yourself some font stacks to work with
=sans-family
  :font-family 'Futura Medium', 'Century Gothic', AppleGothic, sans-serif

=serif-family
  :font-family 'Adobe Caslon Pro', 'Big Caslon', Garamond, 'Hoefler Text', 'Times New Roman', Times, serif


// Remember to add default styles to everything!
/* DEFAULTS
\:focus
  :outline 1px dotted

/* links
a
  &:link, &:visited
    :color= !links
    :text-decoration none
  &:focus, &:hover, &:active
    :color= !light
    :border-bottom
      :width .1429em
      :style dashed

/* headers
h1
  +serif-family
  :text-transform lowercase
  :font-size 3em
  :line-height 1
  :font-weight bold
  :color= !links

h2
  :font-weight bold
  :text-transform uppercase

/* block tags
p
  :margin 0 0 1.5em 0

=list-default(!ol = false)
  @if !ol
    :list-style decimal
    :margin 0 1.5em 1.5em 1.5em
  @else
    :list-style disc
    :margin 0 1.5em 1.5em 1.5em

ol
  +list-default("ol")

ul
  +list-default

/* inline tags
em
  +inline-italic

strong
  :font-weight bold

ins
  :text-decoration underline

del
  :text-decoration line-through

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Susy :: A Grid Plugin for Compass</title>
    <link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">
  </head>
  <body>
    <div id="page">

      <div id="brand" class="header">
        <h1>Susy: A Compass Plugin</h1>
      </div><!--/#brand-->

      <div id="nav" class="nav">
        <ul>
          <li><a href="http://github.com/ericam/compass-susy-plugin/#readme">Download</a></li>
          <li><a href="http://www.oddbird.net/susy/tutorial">Learn</a></li>
          <li><a href="http://github.com/ericam/compass-susy-plugin/">Get Involved</a></li>
        </ul>
      </div><!--/#nav-->

      <div id="content" class="section">
        <div id="description">
          <p>Because damnit - you're a designer not a mathmetician.</p>

          <p>
            Susy is a grid system for web designers. Built on the techniques
            of <a href="http://natbat.net/">Natalie Downe</a>, the <a
            href="http://compass-style.org/">Compass</a> authoring framework,
            and the <a href="http://sass-lang.com/about.html">Sass</a>
            meta-language for CSS, Susy brings together the unique semantic
            control of hand-written code with the speed of a framework and the
            strength needed for a bullet-proof design. With Susy you can build
            quick, custom grids that respond to the needs of the user without
            giving up design integrity. It's elastic, it's fluid, it's Susy.
          </p>

          <p>
            Susy is an open source project envisioned and maintained by the
            <a href="/">OddBrid Collective</a>: Eric Meyer, Carl Meyer and Jonny Gerig Meyer,
            all of whom would love to chat sometime. Give them a ring.
          </p>

        </div>

        <div id="credit">
          <h2>Thanks to:</h2>
          <ul>
            <li>
              <a href="https://github.com/chriseppstein">Chris Eppstein</a> /
              <a href="http://compass-style.org/">Compass</a>
            </li>
            <li>
              <a href="http://nex-3.com/">Nathan Weizenbaum</a> /
              <a href="http://sass-lang.com/about.html">Sass</a>
            </li>
            <li>
              <a href="http://natbat.net/">Natalie Downe</a> /
              <a href="http://natbat.net/2008/Sep/28/css-systems/">CSS Systems</a>
            </li>
          </ul>
        </div><!--/#credit-->

      </div><!--/#content-->

      <div id="site-info" class="footer">
        <p class="license">Susy is licensed by <a href="/">OddBird Collective</a> under a BSD license, 2009.</p>
        <p class="styles"><a href="http://gist.github.com/150061">View the styles for this site.</a></p>
      </div><!--/#site-info-->

    </div><!--/#page-->
  </body>
</html>

## 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 AND STYLE (too simple to split out)
body
  +susy

#page
  +container
  +sans-family
  :color= !text

#brand
  +columns(8)
  +pad(1,1)
  +full
  :margin
    :top 3em
    :bottom 1.5em
  h1
    +columns(5,8)
    +pad(1,2,8)
    +full(8)
    +replace-text("susy_logo.png", "left")
    :height 105px

#nav
  +columns(2)
  +alpha
  ul
    +no-bullets
    :margin 0
    :text-align right
    :font-weight bold

#content
  +columns(8)
  +omega
  :margin-bottom 3em
  #description
    +columns(5,8)
    +alpha(8)
  #credit
    +columns(3,8)
    +omega(8)
    :color= !light

#site-info
  +columns(8)
  +prefix(2)
  +full
  :padding
    :top .5em
    :bottom .75em
  :border-top
    :width .25em
    :style dashed
    :color= !light
  +serif-family
  :font-style italic
  :color= !light
  p
    :margin 0
    &.license
      +columns(5,8)
      +alpha(8)
    &.styles
      +columns(3,8)
      +omega(8)
      :text-align right
  a:link, a:visited
    :color= !light
    :font-weight bold

/* DEBUG
  uncomment, adjust and use for debugging

/ #page
/   +show-grid("../images/grid.png")
/   :background-position= !side_gutter_width + "em top"
/   div
/     :background #333
/     +opacity(.75)
/     div
/       :background #000
	//**
	// Susy: Elastic-Fluid grids without all the math
	// by Eric Meyer and OddBird Collective
	// http://www.oddbird.net
	//**


	/* RESET STYLES
	@import compass/reset.sass


	//**
	GRID
	un-comment and override these values as needed for your grid layout
	(defaults are shown)
	!grid_unit = "em"
	!total_cols = 10
	!col_width = 5
	!gutter_width = 2
	!side_gutter_width = 1

	//**
	FONT-SIZE
	un-comment and override these values as needed (defaults are shown)
	- you set the font and line heights in pixels.
	- Susy will do the math and give you !base_font_size and !base_line_height
	variables, set flexibly against the common browser default of 16px
	!base_font_size_px = 14
	!base_line_height_px = 21

	// SUSY
	// (don't move this @import above the GRID and FONT-SIZE overrides)
	@import susy/susy.sass


	// COLORS
	// set any colors you will need later
	!text = #332016
	!light = #CC8866
	!links = #4CAAC0

	// FONTS
	// Give yourself some font stacks to work with
	=sans-family
	:font-family 'Futura Medium', 'Century Gothic', AppleGothic, sans-serif

	=serif-family
	:font-family 'Adobe Caslon Pro', 'Big Caslon', Garamond, 'Hoefler Text', 'Times New Roman', Times, serif


	// Remember to add default styles to everything!
	/* DEFAULTS
	\:focus
	:outline 1px dotted

	/* links
	a
	&:link, &:visited
	:color= !links
	:text-decoration none
	&:focus, &:hover, &:active
	:color= !light
	:border-bottom
	:width .1429em
	:style dashed

	/* headers
	h1
	+serif-family
	:text-transform lowercase
	:font-size 3em
	:line-height 1
	:font-weight bold
	:color= !links

	h2
	:font-weight bold
	:text-transform uppercase

	/* block tags
	p
	:margin 0 0 1.5em 0

	=list-default(!ol = false)
	@if !ol
	:list-style decimal
	:margin 0 1.5em 1.5em 1.5em
	@else
	:list-style disc
	:margin 0 1.5em 1.5em 1.5em

	ol
	+list-default("ol")

	ul
	+list-default

	/* inline tags
	em
	+inline-italic

	strong
	:font-weight bold

	ins
	:text-decoration underline

	del
	:text-decoration line-through
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Susy :: A Grid Plugin for Compass</title>
	<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" charset="utf-8">
	</head>
	<body>
	<div id="page">

	<div id="brand" class="header">
	<h1>Susy: A Compass Plugin</h1>
	</div><!--/#brand-->

	<div id="nav" class="nav">
	<ul>
	<li><a href="http://github.com/ericam/compass-susy-plugin/#readme">Download</a></li>
	<li><a href="http://www.oddbird.net/susy/tutorial">Learn</a></li>
	<li><a href="http://github.com/ericam/compass-susy-plugin/">Get Involved</a></li>
	</ul>
	</div><!--/#nav-->

	<div id="content" class="section">
	<div id="description">
	<p>Because damnit - you're a designer not a mathmetician.</p>

	<p>
	Susy is a grid system for web designers. Built on the techniques
	of <a href="http://natbat.net/">Natalie Downe</a>, the <a
	href="http://compass-style.org/">Compass</a> authoring framework,
	and the <a href="http://sass-lang.com/about.html">Sass</a>
	meta-language for CSS, Susy brings together the unique semantic
	control of hand-written code with the speed of a framework and the
	strength needed for a bullet-proof design. With Susy you can build
	quick, custom grids that respond to the needs of the user without
	giving up design integrity. It's elastic, it's fluid, it's Susy.
	</p>

	<p>
	Susy is an open source project envisioned and maintained by the
	<a href="/">OddBrid Collective</a>: Eric Meyer, Carl Meyer and Jonny Gerig Meyer,
	all of whom would love to chat sometime. Give them a ring.
	</p>

	</div>

	<div id="credit">
	<h2>Thanks to:</h2>
	<ul>
	<li>
	<a href="https://github.com/chriseppstein">Chris Eppstein</a> /
	<a href="http://compass-style.org/">Compass</a>
	</li>
	<li>
	<a href="http://nex-3.com/">Nathan Weizenbaum</a> /
	<a href="http://sass-lang.com/about.html">Sass</a>
	</li>
	<li>
	<a href="http://natbat.net/">Natalie Downe</a> /
	<a href="http://natbat.net/2008/Sep/28/css-systems/">CSS Systems</a>
	</li>
	</ul>
	</div><!--/#credit-->

	</div><!--/#content-->

	<div id="site-info" class="footer">
	<p class="license">Susy is licensed by <a href="/">OddBird Collective</a> under a BSD license, 2009.</p>
	<p class="styles"><a href="http://gist.github.com/150061">View the styles for this site.</a></p>
	</div><!--/#site-info-->

	</div><!--/#page-->
	</body>
	</html>
	/*
	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 AND STYLE (too simple to split out)
	body
	+susy

	#page
	+container
	+sans-family
	:color= !text

	#brand
	+columns(8)
	+pad(1,1)
	+full
	:margin
	:top 3em
	:bottom 1.5em
	h1
	+columns(5,8)
	+pad(1,2,8)
	+full(8)
	+replace-text("susy_logo.png", "left")
	:height 105px

	#nav
	+columns(2)
	+alpha
	ul
	+no-bullets
	:margin 0
	:text-align right
	:font-weight bold

	#content
	+columns(8)
	+omega
	:margin-bottom 3em
	#description
	+columns(5,8)
	+alpha(8)
	#credit
	+columns(3,8)
	+omega(8)
	:color= !light

	#site-info
	+columns(8)
	+prefix(2)
	+full
	:padding
	:top .5em
	:bottom .75em
	:border-top
	:width .25em
	:style dashed
	:color= !light
	+serif-family
	:font-style italic
	:color= !light
	p
	:margin 0
	&.license
	+columns(5,8)
	+alpha(8)
	&.styles
	+columns(3,8)
	+omega(8)
	:text-align right
	a:link, a:visited
	:color= !light
	:font-weight bold

	/* DEBUG
	uncomment, adjust and use for debugging

	/ #page
	/ +show-grid("../images/grid.png")
	/ :background-position= !side_gutter_width + "em top"
	/ div
	/ :background #333
	/ +opacity(.75)
	/ div
	/ :background #000