Ian Young ijy

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

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

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

	<xsl:call-template name="pagination">
	<xsl:with-param name="pagination" select="pagination" />
	<!-- build an url that holds every get params, except the page -->
	<xsl:with-param name="pagination-url">
	<xsl:value-of select="/data/params/root" />
	<xsl:value-of select="/data/params/parent-path" />
	<xsl:text>?</xsl:text>
	<xsl:for-each select="/data/params/*[contains(name(), 'url-')]">
	<xsl:if test="not(name(.) = 'url-page')">
	<xsl:value-of select="concat(substring-after(name(), 'url-'), '=', text())" />

	<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

	// Simple, single configuration file to override almost all paths and server settings. As used by @airways
	// and @litzinger.

	// Only check in the default as dist.config.php, set your version control system to ignore config.php so that
	// local users and each instance (staging, production) can have their own settings.

	// These config files are mainly meant to be used on a shared development server used by all developers,
	// although it works almost as well for local development as well.

	<?xml version="1.0" encoding="UTF-8"?>
	<html>
	<head>
	<link rel="stylesheet" href="workspace/assets/style.css"/>
	</head>
	<body>
	<div id="head">
	<h1>Title</h1>
	</div>
	<div id="package">

	cd ~
	sudo yum update
	sudo yum install java-1.7.0-openjdk.i686 -y

	wget https://github.com/downloads/elasticsearch/elasticsearch/elasticsearch-0.19.9.tar.gz -O elasticsearch.tar.gz

	tar -xf elasticsearch.tar.gz
	rm elasticsearch.tar.gz
	mv elasticsearch-* elasticsearch
	sudo mv elasticsearch /usr/local/share

	[
	{ "keys": ["ctrl+shift+x"], "command": "tidy_xml" },
	{ "keys": ["ctrl+shift+j"], "command": "prettify_json" }
	]

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Responsive Design Testing</title>
	<style>
	body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
	.wrapper { width: 6000px; }
	.frame { float: left; }
	h2 { margin: 0 0 5px 0; }