Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//**
// 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.