Merge pull request #64 from MITx/asset-pipeline

Asset pipeline

Gemfile

 source :rubygems
 
-gem 'guard', '~> 1.0.3'
-gem 'guard-process', '~> 1.0.3'
-gem 'guard-coffeescript', '~> 0.6.0'
+gem 'rake', '0.8.3'
 gem 'sass', '3.1.15'
-gem 'guard-sass', :github => 'sikachu/guard-sass'
 gem 'bourbon', '~> 1.3.6'
-gem 'libnotify', '~> 0.7.2'
-gem 'ruby_gntp', '~> 0.3.4'

Gemfile.lock

-GIT
-  remote: git://github.com/sikachu/guard-sass.git
-  revision: 2a646996d7fdaa2fabf5f65ba700bd8b02f14c1b
-  specs:
-    guard-sass (0.6.0)
-      guard (>= 0.4.0)
-      sass (>= 3.1)
-
 GEM
   remote: http://rubygems.org/
   specs:
     bourbon (1.3.6)
       sass (>= 3.1)
-    coffee-script (2.2.0)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.3.3)
-    execjs (1.3.2)
-      multi_json (~> 1.0)
-    ffi (1.0.11)
-    guard (1.0.3)
-      ffi (>= 0.5.0)
-      thor (>= 0.14.6)
-    guard-coffeescript (0.6.0)
-      coffee-script (>= 2.2.0)
-      guard (>= 0.8.3)
-    guard-process (1.0.3)
-      ffi (~> 1.0.9)
-      guard (>= 0.4.2)
-      spoon (~> 0.0.1)
-    libnotify (0.7.2)
-    multi_json (1.3.5)
-    ruby_gntp (0.3.4)
+    rake (0.8.3)
     sass (3.1.15)
-    spoon (0.0.1)
-    thor (0.15.2)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   bourbon (~> 1.3.6)
-  guard (~> 1.0.3)
-  guard-coffeescript (~> 0.6.0)
-  guard-process (~> 1.0.3)
-  guard-sass!
-  libnotify (~> 0.7.2)
-  ruby_gntp (~> 0.3.4)
+  rake (= 0.8.3)
   sass (= 3.1.15)

Guardfile

-require 'bourbon'
-
-# Helper method
-def production?
-  @@options[:group].include? 'production'
-end
-
-guard :coffeescript, :name => :jasmine, :input => 'templates/coffee/spec', :all_on_start => production?
-
-guard :coffeescript, :input => 'templates/coffee/src', :noop => true
-guard :process, :name => :coffeescript, :command => "coffee -j static/js/application.js -c templates/coffee/src" do
-  watch(%r{^templates/coffee/src/(.+)\.coffee$})
-end
-
-if production?
-  guard :sass, :input => 'templates/sass', :output => 'static/css', :style => :compressed, :all_on_start => true
-else
-  guard :sass, :input => 'templates/sass', :output => 'static/css', :style => :nested, :line_numbers => true
-end

collect_static_resources

+#! /bin/bash
+
+cd $(dirname $0) && django-admin.py collectstatic --noinput --settings=envs.aws --pythonpath=.

envs/common.py

@@ -153,13 +153,16 @@ MANAGERS = ADMINS
 # Static content
 STATIC_URL = '/static/'
 ADMIN_MEDIA_PREFIX = '/static/admin/'
-STATIC_ROOT = ENV_ROOT / "staticfiles" # We don't run collectstatic -- this is to appease askbot checks
+STATIC_ROOT = ENV_ROOT / "staticfiles" 
 
 # FIXME: We should iterate through the courses we have, adding the static 
 #        contents for each of them. (Right now we just use symlinks.)
 STATICFILES_DIRS = [
     PROJECT_ROOT / "static",
     ASKBOT_ROOT / "askbot" / "skins",
+    ("circuits", DATA_DIR / "images"),
+    ("handouts", DATA_DIR / "handouts"),
+    ("subs", DATA_DIR / "subs"),
 
 # This is how you would use the textbook images locally
 #    ("book", ENV_ROOT / "book_images")
@@ -214,14 +217,14 @@ SIMPLE_WIKI_REQUIRE_LOGIN_EDIT = True
 SIMPLE_WIKI_REQUIRE_LOGIN_VIEW = False
 
 ################################# Jasmine ###################################
-JASMINE_TEST_DIRECTORY = PROJECT_ROOT + '/templates/coffee'
+JASMINE_TEST_DIRECTORY = PROJECT_ROOT + '/static/coffee'
 
 ################################# Middleware ###################################
 # List of finder classes that know how to find static files in
 # various locations.
 STATICFILES_FINDERS = (
-    'django.contrib.staticfiles.finders.FileSystemFinder',
-    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'staticfiles.finders.FileSystemFinder',
+    'staticfiles.finders.AppDirectoriesFinder',
 )
 
 # List of callables that know how to import templates from various sources.
@@ -257,6 +260,60 @@ MIDDLEWARE_CLASSES = (
     # 'debug_toolbar.middleware.DebugToolbarMiddleware',
 )
 
+############################### Pipeline #######################################
+
+STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
+
+PIPELINE_CSS = {
+    'application': {
+        'source_filenames': ['sass/application.scss'],
+        'output_filename': 'css/application.css',
+    },
+    'marketing': {
+        'source_filenames': ['sass/marketing.scss'],
+        'output_filename': 'css/marketing.css',
+    },
+    'marketing-ie': {
+        'source_filenames': ['sass/marketing-ie.scss'],
+        'output_filename': 'css/marketing-ie.css',
+    },
+    'print': {
+        'source_filenames': ['sass/print.scss'],
+        'output_filename': 'css/print.css',
+    }
+}
+
+PIPELINE_JS = {
+    'application': {
+        'source_filenames': [
+            'coffee/src/calculator.coffee',
+            'coffee/src/courseware.coffee',
+            'coffee/src/feedback_form.coffee',
+            'coffee/src/main.coffee'
+        ],
+        'output_filename': 'js/application.js'
+    }
+}
+
+PIPELINE_COMPILERS = [
+    'pipeline.compilers.sass.SASSCompiler',
+    'pipeline.compilers.coffee.CoffeeScriptCompiler',
+]
+
+PIPELINE_SASS_ARGUMENTS = '-t compressed -r {proj_dir}/static/sass/bourbon/lib/bourbon.rb'.format(proj_dir=PROJECT_ROOT)
+
+PIPELINE_CSS_COMPRESSOR = None
+PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.yui.YUICompressor'
+
+STATICFILES_IGNORE_PATTERNS = (
+    "sass/*",
+    "coffee/*",
+    "*.py",
+    "*.pyc"
+)
+
+PIPELINE_YUI_BINARY = '/usr/bin/yui-compressor'
+
 ################################### APPS #######################################
 INSTALLED_APPS = (
     # Standard ones that are always installed...
@@ -266,9 +323,12 @@ INSTALLED_APPS = (
     'django.contrib.messages',
     'django.contrib.sessions',
     'django.contrib.sites',
-    'django.contrib.staticfiles',
     'south',
 
+    # For asset pipelining
+    'pipeline',
+    'staticfiles',
+
     # Our courseware
     'circuit',
     'courseware',

envs/dev.py

@@ -81,3 +81,8 @@ FILE_UPLOAD_HANDLERS = (
     'django.core.files.uploadhandler.MemoryFileUploadHandler',
     'django.core.files.uploadhandler.TemporaryFileUploadHandler',
 )
+
+########################### PIPELINE #################################
+
+PIPELINE_COFFEE_SCRIPT_BINARY = 'coffee'
+PIPELINE_SASS_ARGUMENTS = '-r {proj_dir}/static/sass/bourbon/lib/bourbon.rb'.format(proj_dir=PROJECT_ROOT)

envs/logsettings.py

@@ -87,5 +87,10 @@ def get_logger_config(log_dir,
                 'level' : 'DEBUG',
                 'propagate' : False
             },
+            'keyedcache' : {
+                'handlers' : handlers,
+                'level' : 'DEBUG',
+                'propagate' : False
+            },
         }
     }

lib/pipeline_mako.py

+from staticfiles.storage import staticfiles_storage
+
+from mitxmako.shortcuts import render_to_string
+
+from pipeline.conf import settings
+from pipeline.packager import Packager
+from pipeline.utils import guess_type
+
+def compressed_css(package_name):
+    package = settings.PIPELINE_CSS.get(package_name, {})
+    if package:
+        package = {package_name: package}
+    packager = Packager(css_packages=package, js_packages={})
+
+    package = packager.package_for('css', package_name)
+
+    if settings.PIPELINE:
+        return render_css(package, package.output_filename)
+    else:
+        paths = packager.compile(package.paths)
+        return render_individual_css(package, paths)
+
+def render_css(package, path):
+    template_name = package.template_name or "pipeline_mako/css.html"
+    context = package.extra_context
+    context.update({
+        'type': guess_type(path, 'text/css'),
+        'url': staticfiles_storage.url(path)
+    })
+    return render_to_string(template_name, context)
+
+def render_individual_css(package, paths):
+    tags = [render_css(package, path) for path in paths]
+    return '\n'.join(tags)
+
+
+def compressed_js(package_name):
+    package = settings.PIPELINE_JS.get(package_name, {})
+    if package:
+        package = {package_name: package}
+    packager = Packager(css_packages={}, js_packages=package)
+
+    package = packager.package_for('js', package_name)
+
+    if settings.PIPELINE:
+        return render_js(package, package.output_filename)
+    else:
+        paths = packager.compile(package.paths)
+        templates = packager.pack_templates(package)
+        return render_individual_js(package, paths, templates)
+
+def render_js(package, path):
+    template_name = package.template_name or "pipeline_mako/js.html"
+    context = package.extra_context
+    context.update({
+        'type': guess_type(path, 'text/javascript'),
+        'url': staticfiles_storage.url(path)
+    })
+    return render_to_string(template_name, context)
+
+def render_inline_js(package, js):
+    context = package.extra_context
+    context.update({
+        'source': js
+    })
+    return render_to_string("pipeline_mako/inline_js.html", context)
+
+def render_individual_js(package, paths, templates=None):
+    tags = [render_js(package, js) for js in paths]
+    if templates:
+        tags.append(render_inline_js(package, templates))
+    return '\n'.join(tags)

lib/static_replace.py

+from staticfiles.storage import staticfiles_storage
+import re
+
+PREFIX = '/static/'
+STATIC_PATTERN = re.compile(r"""
+(?P<quote>['"])  # the opening quotes
+{prefix}         # the prefix
+(?P<rest>.*?)    # everything else in the url
+(?P=quote)       # the first matching closing quote
+""".format(prefix=PREFIX), re.VERBOSE)
+PREFIX_LEN = len(PREFIX)
+
+def replace(static_url):
+    quote = static_url.group('quote')
+    url = staticfiles_storage.url(static_url.group('rest'))
+    return "".join([quote, url, quote])
+
+def replace_urls(text):
+    return STATIC_PATTERN.sub(replace, text)

rakefile

@@ -60,7 +60,7 @@ task :test => REPORT_DIR do
 end
 
 desc "Start a local server with the specified environment (defaults to dev). Other useful environments are devplus (for dev testing with a real local database)"
-task :runserver, :env do |t, args|
+task :runserver, [:env] => [] do |t, args|
     args.with_defaults(:env => 'dev')
     django_admin = ENV['DJANGO_ADMIN_PATH'] || select_executable('django-admin.py', 'django-admin')
     sh("#{django_admin} runserver --settings=envs.#{args.env} --pythonpath=.")
@@ -78,11 +78,15 @@ task :package do
         set -x
 
         chown -R makeitso:makeitso #{INSTALL_DIR_PATH}
-        
+        chmod +x #{INSTALL_DIR_PATH}/collect_static_resources
+
         service gunicorn stop
         rm -f #{LINK_PATH}
         ln -s #{INSTALL_DIR_PATH} #{LINK_PATH}
         chown makeitso:makeitso #{LINK_PATH}
+
+        /opt/wwc/mitx/collect_static_resources
+
         service gunicorn start
         POSTINSTALL
         postinstall.close()

requirements.txt

@@ -13,6 +13,8 @@ python-memcached
 django-celery
 path.py
 django_debug_toolbar
+django-pipeline
+django-staticfiles>=1.2.1
 django-masquerade
 fs
 django-jasmine

static/book

-../../book_images/
\ No newline at end of file

static/circuits

-../../data/images/
\ No newline at end of file

templates/coffee/README.md → static/coffee/README.md

@@ -34,15 +34,10 @@ Conveniently, you can install Node via `apt-get`, then use npm:
 Compiling
 ---------
 
-We're using Guard to watch your folder and automatic compile those CoffeeScript
-files. First, install guard by using Bundler:
-
-    $ gem install bundler
-    $ bundle install
-
-Then you can run this command:
-
-    $ bundle exec guard
+The dev server will automatically compile coffeescript files that have changed.
+Simply start the server using:
+    
+    $ rake runserver
 
 Testing
 -------

static/coffee/src/.gitignore

+*.js

static/common

-../../askbot-devel/askbot/skins/common/
\ No newline at end of file

static/css/codemirror.css

-.CodeMirror {
-  line-height: 1em;
-  font-family: monospace;
-}
-
-.CodeMirror-scroll {
-  overflow: auto;
-  height: 300px;
-  /* This is needed to prevent an IE[67] bug where the scrolled content
-     is visible outside of the scrolling box. */
-  position: relative;
-  outline: none;
-}
-
-.CodeMirror-gutter {
-  position: absolute; left: 0; top: 0;
-  z-index: 10;
-  background-color: #f7f7f7;
-  border-right: 1px solid #eee;
-  min-width: 2em;
-  height: 100%;
-}
-.CodeMirror-gutter-text {
-  color: #aaa;
-  text-align: right;
-  padding: .4em .2em .4em .4em;
-  white-space: pre !important;
-}
-.CodeMirror-lines {
-  padding: .4em;
-  white-space: pre;
-}
-
-.CodeMirror pre {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  -o-border-radius: 0;
-  border-radius: 0;
-  border-width: 0; margin: 0; padding: 0; background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  padding: 0; margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-}
-
-.CodeMirror-wrap pre {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
-}
-
-.CodeMirror textarea {
-  outline: none !important;
-}
-
-.CodeMirror pre.CodeMirror-cursor {
-  z-index: 10;
-  position: absolute;
-  visibility: hidden;
-  border-left: 1px solid black;
-  border-right:none;
-  width:0;
-}
-.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
-.CodeMirror-focused pre.CodeMirror-cursor {
-  visibility: visible;
-}
-
-div.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
-
-.CodeMirror-searching {
-  background: #ffa;
-  background: rgba(255, 255, 0, .4);
-}
-
-/* Default theme */
-
-.cm-s-default span.cm-keyword {color: #708;}
-.cm-s-default span.cm-atom {color: #219;}
-.cm-s-default span.cm-number {color: #164;}
-.cm-s-default span.cm-def {color: #00f;}
-.cm-s-default span.cm-variable {color: black;}
-.cm-s-default span.cm-variable-2 {color: #05a;}
-.cm-s-default span.cm-variable-3 {color: #085;}
-.cm-s-default span.cm-property {color: black;}
-.cm-s-default span.cm-operator {color: black;}
-.cm-s-default span.cm-comment {color: #a50;}
-.cm-s-default span.cm-string {color: #a11;}
-.cm-s-default span.cm-string-2 {color: #f50;}
-.cm-s-default span.cm-meta {color: #555;}
-.cm-s-default span.cm-error {color: #f00;}
-.cm-s-default span.cm-qualifier {color: #555;}
-.cm-s-default span.cm-builtin {color: #30a;}
-.cm-s-default span.cm-bracket {color: #cc7;}
-.cm-s-default span.cm-tag {color: #170;}
-.cm-s-default span.cm-attribute {color: #00c;}
-.cm-s-default span.cm-header {color: #a0a;}
-.cm-s-default span.cm-quote {color: #090;}
-.cm-s-default span.cm-hr {color: #999;}
-.cm-s-default span.cm-link {color: #00c;}
-
-span.cm-header, span.cm-strong {font-weight: bold;}
-span.cm-em {font-style: italic;}
-span.cm-emstrong {font-style: italic; font-weight: bold;}
-span.cm-link {text-decoration: underline;}
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

static/css/marketing-ie.css

-body{margin:0;padding:0}.wrapper,.subpage,section.copyright,section.tos,section.privacy-policy,section.honor-code,header.announcement div,section.index-content,footer{margin:0;overflow:hidden}div#enroll form{display:none}

static/default

-../../askbot-devel/askbot/skins/default/
\ No newline at end of file

static/handouts

-../../data/handouts/
\ No newline at end of file

static/js/application.js

-// Generated by CoffeeScript 1.3.3
-(function() {
-
-  window.Calculator = (function() {
-
-    function Calculator() {}
-
-    Calculator.bind = function() {
-      var calculator;
-      calculator = new Calculator;
-      $('.calc').click(calculator.toggle);
-      $('form#calculator').submit(calculator.calculate).submit(function(e) {
-        return e.preventDefault();
-      });
-      return $('div.help-wrapper a').hover(calculator.helpToggle).click(function(e) {
-        return e.preventDefault();
-      });
-    };
-
-    Calculator.prototype.toggle = function() {
-      $('li.calc-main').toggleClass('open');
-      $('#calculator_wrapper #calculator_input').focus();
-      if ($('.calc.closed').length) {
-        $('.calc').attr('aria-label', 'Open Calculator');
-      } else {
-        $('.calc').attr('aria-label', 'Close Calculator');
-      }
-      return $('.calc').toggleClass('closed');
-    };
-
-    Calculator.prototype.helpToggle = function() {
-      return $('.help').toggleClass('shown');
-    };
-
-    Calculator.prototype.calculate = function() {
-      return $.getJSON('/calculate', {
-        equation: $('#calculator_input').val()
-      }, function(data) {
-        return $('#calculator_output').val(data.result);
-      });
-    };
-
-    return Calculator;
-
-  })();
-
-  window.Courseware = (function() {
-
-    function Courseware() {}
-
-    Courseware.bind = function() {
-      return this.Navigation.bind();
-    };
-
-    Courseware.Navigation = (function() {
-
-      function Navigation() {}
-
-      Navigation.bind = function() {
-        var active, navigation;
-        if ($('#accordion').length) {
-          navigation = new Navigation;
-          active = $('#accordion ul:has(li.active)').index('#accordion ul');
-          $('#accordion').bind('accordionchange', navigation.log).accordion({
-            active: active >= 0 ? active : 1,
-            header: 'h3',
-            autoHeight: false
-          });
-          return $('#open_close_accordion a').click(navigation.toggle);
-        }
-      };
-
-      Navigation.prototype.log = function(event, ui) {
-        return log_event('accordion', {
-          newheader: ui.newHeader.text(),
-          oldheader: ui.oldHeader.text()
-        });
-      };
-
-      Navigation.prototype.toggle = function() {
-        return $('.course-wrapper').toggleClass('closed');
-      };
-
-      return Navigation;
-
-    })();
-
-    return Courseware;
-
-  }).call(this);
-
-  window.FeedbackForm = (function() {
-
-    function FeedbackForm() {}
-
-    FeedbackForm.bind = function() {
-      return $('#feedback_button').click(function() {
-        var data;
-        data = {
-          subject: $('#feedback_subject').val(),
-          message: $('#feedback_message').val(),
-          url: window.location.href
-        };
-        return $.post('/send_feedback', data, function() {
-          return $('#feedback_div').html('Feedback submitted. Thank you');
-        }, 'json');
-      });
-    };
-
-    return FeedbackForm;
-
-  })();
-
-  $(function() {
-    $.ajaxSetup({
-      headers: {
-        'X-CSRFToken': $.cookie('csrftoken')
-      }
-    });
-    Calculator.bind();
-    Courseware.bind();
-    FeedbackForm.bind();
-    return $("a[rel*=leanModal]").leanModal();
-  });
-
-}).call(this);

static/js/jquery.treeview.css

@@ -47,28 +47,3 @@
 .treeview li.lastExpandable { background-position: -32px -67px }
 
 .treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
-
-.treeview-red li { background-image: url(images/treeview-red-line.gif); }
-.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 
-
-.treeview-black li { background-image: url(images/treeview-black-line.gif); }
-.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  
-
-.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
-.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } 
-
-.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
-.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } 
-
-.treeview .placeholder {
-	background: url(images/ajax-loader.gif) 0 0 no-repeat;
-	height: 16px;
-	width: 16px;
-	display: block;
-}
-
-.filetree li { padding: 3px 0 2px 16px; }
-.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
-.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
-.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
-.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }

static/sass/.gitignore

+*.css

templates/sass/README.md → static/sass/README.md

@@ -19,20 +19,7 @@ This should ensure that you have all the dependencies required for compiling.
 Compiling
 ---------
 
-We're using Guard to watch your folder and automatic compile those SASS files.
-If you already install all the dependencies using Bundler, you can just do:
-
-    $ bundle exec guard
-
-This will generate the sass file for development which some debugging
-information.
-
-### Before Commit
-
-Since this compiled style you're going to push are going to be used on live
-production site, you're encouraged to compress all of the style to save some
-bandwidth. You can do that by run this command:
-
-    $ bundle exec guard -g production
-
-Guard will watch your directory and generated a compressed version of CSS.
+The dev server will automatically compile sass files that have changed. Simply start
+the server using:
+    
+    $ rake runserver

templates/sass/_info.scss → static/sass/_info.scss

@@ -121,7 +121,7 @@ div.info-wrapper {
         }
 
         div.hitarea {
-          background-image: url('/static/images/treeview-default.gif');
+          background-image: url('../images/treeview-default.gif');
           display: block;
           height: 100%;
           left: lh(.75);

templates/sass/_textbook.scss → static/sass/_textbook.scss

@@ -22,7 +22,7 @@ div.book-wrapper {
         padding-left: 30px;
 
         div.hitarea {
-          background-image: url('/static/images/treeview-default.gif');
+          background-image: url('../images/treeview-default.gif');
           margin-left: -22px;
           position: relative;
           top: 4px;
@@ -106,7 +106,7 @@ div.book-wrapper {
         padding: 0;
 
         a {
-          background-image: url('/static/images/slide-right-icon.png');
+          background-image: url('../images/slide-right-icon.png');
         }
 
         h2 {

templates/sass/base/_extends.scss → static/sass/base/_extends.scss

@@ -141,7 +141,7 @@ h1.top-header {
     }
 
     span.ui-icon {
-      background-image: url(images/ui-icons_454545_256x240.png);
+      background-image: url(../images/ui-icons_454545_256x240.png);
     }
 
     &.active {
@@ -170,7 +170,7 @@ h1.top-header {
     }
 
     a {
-      background: #eee url('/static/images/slide-left-icon.png') center center no-repeat;
+      background: #eee url('../images/slide-left-icon.png') center center no-repeat;
       border: 1px solid #D3D3D3;
       @include border-radius(3px 0 0 3px);
       height: 16px;

static/sass/base/_font-face.scss

+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 25, 2012 05:06:34 PM America/New_York */
+
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-Light-webfont.eot');
+//     src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
+//     font-weight: 300;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-LightItalic-webfont.eot');
+//     src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
+//     font-weight: 300;
+//     font-style: italic;
+
+// }
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Regular-webfont.eot');
+    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+    font-weight: 600;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Italic-webfont.eot');
+    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
+    font-weight: 400;
+    font-style: italic;
+
+}
+
+// Not used in UI
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-Semibold-webfont.eot');
+//     src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+//     font-weight: 600;
+//     font-style: normal;
+
+// }
+
+// @font-face {
+//     font-family: 'Open Sans';
+//     src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot');
+//     src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
+//          url('../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
+//     font-weight: 600;
+//     font-style: italic;
+
+// }
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-Bold-webfont.eot');
+    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+    font-weight: 700;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
+    font-weight: 700;
+    font-style: italic;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-ExtraBold-webfont.eot');
+    src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
+    font-weight: 800;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot');
+    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
+    font-weight: 800;
+    font-style: italic;
+
+}
+