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.
CSS Systems
| server { | |
| # Redirect yoursite.com to www.yoursite.com | |
| server_name yoursite.com; | |
| rewrite ^(.*) http://www.yoursite.com$1 permanent; | |
| } | |
| server { | |
| # Tell nginx to handle requests for the www.yoursite.com domain | |
| server_name www.yoursite.com; |
| /*! | |
| * | |
| * Copyright (c) David Bushell | @dbushell | http://dbushell.com/ | |
| * | |
| */ | |
| var fs = require("fs"), | |
| path = require("path"); | |
| module.exports = function(grunt) |
| # ~/.osx — http://mths.be/osx | |
| ############################################################################### | |
| # General UI/UX # | |
| ############################################################################### | |
| # Set computer name (as done via System Preferences → Sharing) | |
| scutil --set ComputerName "MacBookPro" | |
| scutil --set HostName "MacBookPro" | |
| scutil --set LocalHostName "MacBookPro" |
| (function () { | |
| // Mock necessary parts of zepto for fx module | |
| window.Zepto = function () { return $(arguments) } | |
| window.Zepto.isObject = function () { return false } | |
| window.Zepto.each = $.each | |
| window.Zepto.extend = $.extend | |
| window.Zepto.fn = {} | |
| /* |
| require 'formula' | |
| class Vim < Formula | |
| homepage 'http://www.vim.org/' | |
| url 'ftp://ftp.vim.org/pub/vim/unix/vim-7.3.tar.bz2' | |
| head 'https://vim.googlecode.com/hg/' | |
| sha256 '5c5d5d6e07f1bbc49b6fe3906ff8a7e39b049928b68195b38e3e3d347100221d' | |
| version '7.3.682' | |
| def features; %w(tiny small normal big huge) end |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> | |
| <html lang="en"> | |
| <head> | |
| <title>App name goes here</title> | |
| <!-- Load some CSS here. --> | |
| <link rel="stylesheet" type="text/css" href="css/main.css"> | |
| </head> | |
| <body> | |
| <!-- Optional part. Define some global opts. You can set these easily via PHP or so. --> |
| /*! | |
| * RequireJS plugin for async dependency load like JSONP and Google Maps | |
| * @author Miller Medeiros | |
| * @version 0.0.1 (2011/03/23) | |
| * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> | |
| */ | |
| define(function(){ | |
| function injectScript(src){ | |
| var s, t; |
| ... | |
| // test for font-face version to load via Data URI'd CSS | |
| // Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot | |
| var fonts = ns.files.css.fontsWOFF, | |
| ua = win.navigator.userAgent; | |
| // android webkit browser, non-chrome | |
| if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){ | |
| fonts = ns.files.css.fontsTTF; | |
| } |
| // http://jasonwyatt.tumblr.com/post/10481498815/how-to-correctly-debounce-a-javascript-function | |
| function debounce(fn, debounceDuration) | |
| { | |
| debounceDuration = debounceDuration || 100; | |
| return function(){ | |
| if(!fn.debouncing){ | |
| var args = Array.prototype.slice.apply(arguments); | |
| fn.lastReturnVal = fn.apply(window, args); | |
| fn.debouncing = true; |
