Ian Young ijy

Sublime Text 2 – Useful Shortcuts (PC)

Loosely ordered with the commands I use most towards the top. Sublime also offer full documentation.

Editing

Ctrl+C	copy current line (if no selection)
Ctrl+X	cut current line (if no selection)
Ctrl+⇧+K	delete line
Ctrl+↩	insert line after

Setup new Mac with OSX Lion from scratch

These commands are good as of 2011-07-27.

Install xcode 4

App store http://itunes.apple.com/us/app/xcode/id448457090?mt=12) The download/install takes awhile so start it first. When it finishes downloading you will still need to run it to complete installation.

iTerm2 http://www.iterm2.com/

What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?

This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.

There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.

Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.

Without further adue, tada.

	@function em($target, $context: $base-font-size) {
	@if $target == 0 { @return 0 }
	@return $target / $context + 0em;
	}

	$base-font-size: 15px;

	h1 {
	font-size: em(21px, 15px); // Outputs 1.4em
	}

	<?php
	/**
	* twig.php
	*
	* Command-line script to process YAML frontmatter with Twig templates.
	* Inspired by Mustache <http://github.com/defunkt/mustache>.
	*
	* Example template file (test.html):
	* ---
	* people: [ {name: scott}, {name: laura} ]

	{!-- Global Variables --}
	{preload_replace:template_group="food-wine"}
	{preload_replace:template="lunchtogo"}

	{embed="_partials/_head" body_id="lunchtogo"
	{if segment_3 == ""} {!-- Lunch Home --}
	body_class="l-lunch lunch-home"
	{if:elseif segment_3 != "" AND segment_4== ""} {!-- Lunch Category View --}
	body_class="l-lunch lunch-cat"
	{if:elseif segment_4 != ""} {!-- Lunch Product View --}

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

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

	<!DOCTYPE html>
	<html>
	<head>
	<title>Todos</title>
	<link href="stylesheets/screen.css" media="all" rel="stylesheet" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script src="javascripts/json2.js"></script>
	<script src="javascripts/underscore.js"></script>
	<script src="javascripts/backbone.js"></script>

	/* global module:false */
	module.exports = function(grunt) {

	// Project configuration.
	grunt.initConfig({
	// Project metadata, used by some directives, helpers and tasks.
	meta: {
	project: '<Project Name>',
	author: "<Author>",
	url: '<URL>',

	@include show-susy-with-baseline($baseline: rhythm(1)) {
	@include grid-background($total-columns, column(), gutter(), $baseline, 0%);
	@include background-size(100% $baseline, auto);
	@include background-origin(border-box, content-box);
	@include background-clip(border-box, content-box);
	}