Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne

mirisuzanne/_base.sass

Created July 22, 2009 23:44
Show Gist options
  • Save mirisuzanne/152397 to your computer and use it in GitHub Desktop.
Save mirisuzanne/152397 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_base.sass
//**
// Susy: Elastic-Fluid grids without all the math
// by Eric Meyer and OddBird Collective
// oddbird.
//**
//**
GRID
un-comment and override these values as needed for your grid layout
(defaults are shown)
!grid_unit = "em"
!total_cols = 10
!col_width = 7
!gutter_width = 1
!side_gutter_width = 3
//**
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 = 12
// !base_line_height_px = 18
// 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
!dark = #000
!light = #fff
// 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
/* links
a
/* headers
h1, h2, h3, h4, h5, h6
/* forms
form
fieldset
label
textarea
input
input[type=submit]
/* block tags
p
ol
ul
blockquote
/* inline tags
cite
em
+inline-italic
strong
:font-weight bold
ins
:text-decoration underline
del
:text-decoration line-through
/* replaced tags
img
Raw
ie-omega.sass
//**
use to override +omega in ie.sass for IE6-7 to handle sub-pixel rounding issues
- must override `!nested` for nested columns
- must override `!right` for right-floated omega elements
=ie-omega(!nested = false, !right = false)
@if !right
@if !nested
:margin-right 0
@else
:margin-right= side_gutter() + "%"
:margin-left -1%
@else
@if !nested
:margin-right= -1%
@else
:margin-right= side_gutter() - 1 + "%"
Raw
ie.sass
/*
Welcome to Susy. Use this file to write IE specific override styles.
Import this file using the following HTML or equivalent:
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
/* @group defaults */
@import base.sass
/* @end */
/* @group STRUCTURE */
.line-1
.lastUnit
+ie-omega(10,"right")
.size3of5
.size2of3
.size1of1
+ie-omega(4)
.lastUnit
+ie-omega(4,"right")
.lastUnit
+ie-omega(6,"right")
/* @end */
Raw
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" />
*/
/* @group reset */
@import compass/reset.sass
/* @end */
/* @group defaults */
@import base.sass
/* @end */
/* @group STRUCTURE */
body
+susy
#page
+container
+sans-family
h3
:color red
.line-1
+columns(10)
+full
.size1of5
+columns(2,10)
.lastUnit
+omega(10)
+float("right")
.size3of5
+columns(6,10)
.size1of2
+columns(3,6)
.size1of3
+columns(2,6)
.size2of3
+columns(4,6)
.size1of2
+columns(2,4)
.size1of1
+columns(4,4)
+omega(4)
.lastUnit
+omega(4)
+float("right")
.lastUnit
+omega(6)
+float("right")
/* @end */
/* @group DEBUG */
div
:background rgba(0,0,0,.125)
/* @end */
Raw
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Susy Test Page</title>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" media="screen, projection" />
<!--[if IE]>
<link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="page">
<div class="line-1">
<div class="unit size1of5">
<h3>1/5</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
<div class="unit size3of5">
<!-- line -->
<div class="line">
<div class="unit size1of2">
<h3>1/2</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
<div class="unit size1of2 lastUnit">
<h3>1/2</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
</div>
<!-- /line -->
<div class="line">
<div class="unit size1of3">
<h3>1/3</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
<div class="unit size2of3 lastUnit">
<!-- line -->
<div class="line">
<div class="unit size1of2">
<h3>1/2</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
<div class="unit size1of2 lastUnit">
<h3>1/2</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
</div>
<!-- /line -->
<div class="line">
<div class="unit size1of1">
<h3>1</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
</div>
</div>
</div>
</div>
<div class="unit size1of5 lastUnit">
<h3>1/5</h3>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
<p>Molestie consequat vel illum dolore eu feugiat nulla, facilisis at vero eros et accumsan et. Iusto odio dignissim qui blandit praesent luptatum zzril. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes.</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment