Patrick Welker patrickwelker

Susy 0.9 Reference Documentation

See the official Susy site for 1.0 documentation.

Terms

Susy Grid: A grid that you build with Susy. You can have multiple on one page if you need.
Grid Element: Any HTML element that is aligned to a Susy Grid.
Container: The root element in a Susy Grid. Anything inside it is a potential Grid Element.

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T	go to file
⌘⌃P	go to project
⌘R	go to methods
⌃G	go to line
⌘KB	toggle side bar
⌘⇧P	command prompt

Susy Tutorial

For this tutorial I'm assuming you are already comfortable with CSS, Sass (I'll use the SCSS syntax) and Compass. Please get set up with each one of those before attempting to use Susy. Sass and Compass both have their own setup instructions and tutorials that you can use.

There is also reference documentation in the works.

What Susy Does

CSS Systems

	tell application "Google Chrome"
	set theTitle to title of active tab of front window
	set theURL to URL of active tab of front window
	end tell

	tell application "OmniFocus"
	set theDoc to default document
	set theTask to theTitle
	set theNote to theURL

	/*
	This is my hacked up copy of Marked.app/Contents/Resources/gridless.css

	Changes:

	1. Smaller headings
	2. ~~No scrollbars~~ (I now prefer the Lion default behavior)
	3. Styling of definition lists ala LaTeX description lists.
	4. Centering h1.title, h3.author, h4.date (pandoc's title/author/date block).

	-- Add file to Dropbox Script
	-- Andrew Burgess, modified a bit from http://www.bencardy.co.uk/blog/dropbox-applescript/

	-- You'll have to change the first part of your Dropbox URL, in the filePath variable
	-- Also, make sure the myPath variable points in the right direction

	on splitText(delimiter, someText)
	set prevTIDs to AppleScript's text item delimiters
	set AppleScript's text item delimiters to delimiter
	set output to text items of someText

	@mixin inset-text($color, $amount: 0.7) {
	color: $color;
	@if lightness($color) < 50% { @include single-text-shadow(rgba(white, $amount), 1px, 1px, 1px); }
	@else { @include single-text-shadow(rgba(black, $amount), -1px, -1px, 1px); }
	}

	@mixin ie6 { * html & { @content } }

	#logo {
	background-image: url("/images/logo.png");
	@include ie6 { background-image: url("/images/logo.gif"); }
	}

	/*
	* HTML5 ✰ Boilerplate
	*
	* What follows is the result of much research on cross-browser styling.
	* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
	* Kroc Camen, and the H5BP dev community and team.
	*
	* Detailed information about this CSS: h5bp.com/css
	*
	* ==\|== normalize ==========================================================

	iframe {
	max-width: 100%;
	}