Caroline Artz carolineartz

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

Rails Models

Generating models

$ rails g model User

Associations

belongs_to

has_one

Running Gists like a JsFiddle

TL;DR: This page (html, css, javascript, markdown) is being served from this gist using this server.

After working with AngularJS, which is totally awesome, I wanted a better way to share code snippets with the community. Something where the header declarations aren't hidden, so it's clear which version of angular you're using and whether zepto/jquery/underscore are loaded. I also wanted to use CoffeeScript, HAML and SCSS because that's what I use to write Goodfilms (my day job).

This HTML is being rendered from HAML, the CSS is being compiled from SCSS, the JS code is written in Coffeescript and even this here text is being compiled (in the browser) from a gist-hosted Markdown file.

Rails Migration

http://guides.rubyonrails.org/migrations.html

Migrations methods:

add_column
add_index
change_column
change_table
create_table
drop_table

	## Prepare ###################################################################

	# Remove RVM
	rvm implode

	# Ensure your homebrew is working properly and up to date
	brew doctor
	brew update

	## Install ###################################################################

	# Shortcut for `bundle exec rails` and `bundle exec rake`.
	# If bin/rails and bin/rake are available, use them instead as they are much
	# faster to execute than `bundle exec`.
	function r() {
	if [[ "g\|generate\|c\|console\|s\|server\|db\|dbconsole\|r\|runner\|new" =~ $1 ]]; then
	if [ -x bin/rails ]; then
	bin/rails "$@"
	elif [ -x script/rails ]; then
	script/rails "$@"
	else

	/**
	* requestAnimationFrame polyfill by Erik Möller & Paul Irish et. al.
	* https://gist.github.com/1866474
	*
	* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	* http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
	**/

	/jshint asi: false, browser: true, curly: true, eqeqeq: true, forin: false, newcap: true, noempty: true, strict: true, undef: true /


	# 1) Use VCR.use_cassette in your let block. This will use
	# the cassette just for requests made by creating bar, not
	# for anything else in your test.
	let(:foo) { VCR.use_cassette("foo") { create(:bar) } }
	it "uses foo" do
	foo
	end

	# 2) Wrap the it block that uses #foo in VCR.use_cassette.

	<% [:notice, :error, :alert].each do \|level\| %>
	<% unless flash[level].blank? %>
	<div class="alert-message <%= flash_class(level) %>">
	<a class="close" href="#">×</a>
	<%= content_tag :p, flash[level] %>
	</div>
	<% end %>
	<% end %>

	// Maintain ratio mixin. Great for responsive grids, or videos.
	// https://gist.github.com/brianmcallister/2932463
	//
	// $ratio - Ratio the element needs to maintain.
	//
	// Examples
	//
	// // A 16:9 ratio would look like this:
	// .element {
	// @include maintain-ratio(16 9);