Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created July 19, 2009 21:58
Show Gist options
  • Save mirisuzanne/150053 to your computer and use it in GitHub Desktop.
Save mirisuzanne/150053 to your computer and use it in GitHub Desktop.
//**
// Susy: Elastic-Fluid grids without all the math
// by Eric Meyer and OddBird Collective
// 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
a
&:link, &:visited
:color= !links
:text-decoration none
&:focus, &:hover, &:active
:color= !light
:border-bottom
:width .1429em
:style dashed
p
:margin 0 0 1.5em 0
/* 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 */
a:link, a:visited { color: #4caac0; text-decoration: none; }
a:focus, a:hover, a:active { color: #cc8866; border-bottom-width: .1429em; border-bottom-style: dashed; }
p { margin: 0 0 1.5em 0; }
/* STRUCTURE */
body { text-align: center; font-size: 87.5%; line-height: 150%; }
#page { overflow: hidden; display: inline-block; text-align: left; margin-left: auto; margin-right: auto; width: 70em; max-width: 100%; font-family: 'Futura Medium', 'Century Gothic', AppleGothic, sans-serif; color: #332016; }
#page { display: block; }
#brand { width: 77.143%; display: inline; float: left; margin-right: 2.857%; padding-left: 10%; padding-right: 10%; margin-left: 1.429%; margin-right: 1.429%; }
#brand h1 { width: 61.111%; display: inline; float: left; margin-right: 3.704%; padding-left: 12.963%; padding-right: 25.926%; margin-left: 0; margin-right: 0; }
#nav { width: 17.143%; display: inline; float: left; margin-right: 2.857%; margin-left: 1.429%; }
#content { width: 77.143%; display: inline; float: left; margin-right: 2.857%; margin-right: 1.429%; }
#content #description { width: 61.111%; display: inline; float: left; margin-right: 3.704%; margin-left: 0; }
#content #credit { width: 35.185%; display: inline; float: left; margin-right: 3.704%; margin-right: 0; }
#site-info { width: 77.143%; display: inline; float: left; margin-right: 2.857%; padding-left: 20%; margin-left: 1.429%; margin-right: 1.429%; }
#site-info p.license { width: 61.111%; display: inline; float: left; margin-right: 3.704%; margin-left: 0; }
#site-info p.styles { width: 35.185%; display: inline; float: left; margin-right: 3.704%; margin-right: 0; }
/*
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
#page
+container
+sans-family
:color= !text
#brand
+columns(8)
+pad(1,1)
+full
h1
+columns(5,8)
+pad(1,2,8)
+full(8)
#nav
+columns(2)
+alpha
#content
+columns(8)
+omega
#description
+columns(5,8)
+alpha(8)
#credit
+columns(3,8)
+omega(8)
#site-info
+columns(8)
+prefix(2)
+full
p.license
+columns(5,8)
+alpha(8)
p.styles
+columns(3,8)
+omega(8)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment