ltackett

strongbad:placeholder_site ltackett$ staticmatic preview site
/Library/Ruby/Gems/1.8/gems/staticmatic-0.9.5/bin/staticmatic:19: /Library/Ruby/Gems/1.8/gems/chriseppstein-compass-0.4.1/lib/sass_extensions.rb:3: uninitialized constant Sass::Script (NameError)
	from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:27:in `gem_original_require'
	from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:27:in `require'
	from /Library/Ruby/Gems/1.8/gems/chriseppstein-compass-0.4.1/lib/compass.rb:17
	from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:32:in `gem_original_require'
	from /Library/Ruby/Site/1.8/rubygems/custom_require.rb:32:in `require'
	from (eval):1
	from /usr/bin/staticmatic:19:in `eval'
	from /Library/Ruby/Gems/1.8/gems/staticmatic-0.9.5/bin/staticmatic:19

ltackett

Successfully installed haml-edge-2.1.30
1 gem installed
Installing ri documentation for haml-edge-2.1.30...
ERROR:  While generating documentation for haml-edge-2.1.30
... MESSAGE:   Unhandled special: Special: type=17, text="<!-- This is the peanutbutterjelly element -->"
... RDOC args: --ri --op /usr/local/lib/ruby/gems/1.8/doc/haml-edge-2.1.30/ri --title Haml --main README.rdoc --exclude lib/haml/buffer.rb --line-numbers --inline-source --quiet lib FAQ.md MIT-LICENSE README.md VERSION REVISION EDGE_GEM_VERSION --title haml-edge-2.1.30 Documentation
(continuing with the rest of the installation)

ltackett

!!! Strict
%html
  %head
    %title
      = h(yield(:title) || "Untitled") + ' - Navigating Cancer'
      
    / These stylesheets are for the new front-end and for Compass
    = stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection'
    = stylesheet_link_tag 'compiled/print.css', :media => 'print'
    /[if IE]

ltackett

static_shit.haml
----------------
- title "Static Happiness"
%h3 Static Elements
#buttons
  %h4.line Buttons, Motherfuton!!
  =new_button "primary", 'Add Your Experience', '#'
  =button "cancel"
  =button "go"
  =button "save"

ltackett

class StaticController < ApplicationController
  # Static elements
  def index end
  
  ##############
  # Share
  ##############
  def share end
  
    ##############

ltackett

So right now you're probably looking at the timeline at the bottom of this video and thinking

"Sweet! This is gunna be short! I like short."

The most important thing you need to understand about Compass is that Compass makes your life easier and your stylesheets awesome.

Compass is a stylesheet authoring framework that makes stylesheets and markup easier to build and maintain. Compass is built on top of Sass, With Compass, you write your stylesheets in Sass instead of CSS.

Sass is a stylesheet rendering engine, Sass gives you features that CSS lacks, including constants, arithmetic, mixins and more. Sass has a lot of features, many of which are out of the scope of this video, but to understand Compass we're going to need to run through Sass bootcamp. To kill two birds with one stone, I'll explain Sass syntax and its usage as I go along.

ltackett

- with_options :scope => scope do |fields| 
  %div{:id => field.to_s, :class => "#{input_type} field"}
    %label= fields.t(:label)
- with_options :scope => scope do |fields|
  %div{:id => field.to_s, :class => "#{helper} field"}
    - if !options.has_key?(:label) || options[:label]
      %label= fields.t(:label)
    = input
    - if !options.has_key?(:help_button) || options[:help_button]
      = fields.help_button

ltackett

 NoMethodError in Sent_messages#show

Showing app/views/resources/_submit.html.haml where line #4 raised:

undefined method `user_sent_messages_path' for #<ActionView::Base:0x35c8da4>

Extracted source (around line #4):

1: .submit-button
2:   = submit

ltackett

    // Shared Experience textarea blocker
    $('#experience textarea#experience_body').bind('keypress', function(){
      $('a').attr('rel', 'blocked');
    });
    // Be alert! The world needs more Lerts.
    $('a[rel="blocked"]').click(function(){
      alert('Sorry, This is just a demo!');
      return false;
    });

ltackett

    var needToConfirm = false;
    
    $('#experience textarea#experience_body, #new-discussion textarea#discussion_posts_attributes_0_text').bind('keypress', function(){
      $('body').css('background-color', '#f00')
      var needToConfirm = true;
    });
    
    $('input[type="submit"]').bind('click', function(){
      $('body').css('background-color', '#fff')
      var needToConfirm = false;