superfine

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

superfine

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================

superfine

@mixin responsive-sprite($map, $icon){
  $icon-file: sprite-file($map, $icon);
  $icon-width: image-width($icon-file);
  $icon-height: image-height($icon-file);

  $sprite-file: sprite-path($map);
  $sprite-width: image-width($sprite-file);
  $sprite-height: image-height($sprite-file);

  $space-top: floor(nth(sprite-position($map, $icon), 2));

superfine

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.

superfine

$break-small: 320px;
$break-large: 1024px;

 @mixin  respond-to($media) {
   @if  $media == handhelds {
     @media  only screen and (max-width: $break-small) { @content; }
  }
   @else  if $media == medium-screens {
     @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }

superfine

Sublime Text 2 - Useful Shortcuts

Tested in Mac OS X: super == command

Open/Goto

---

• super+t: go to file
• super+ctrl+p: go to project
• super+r: go to methods

superfine

/*

NOTE!!!!

The most updated version of this code is here:

https://github.com/scottjehl/iOS-Orientationchange-Fix

 A fix for the dreaded iOS orientationchange zoom bug http://adactio.com/journal/5088/. Seems to work!
 Authored by @scottjehl. Props to @wilto for addressing a tilt caveat.

superfine

//Originally from http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

var InfiniteRotator =
    {
      itemInterval: 3000,
      infiniteLoop: function() {
          setInterval(function(){
            $('.sliderItem').eq(currentItem).stop().transition({opacity: 0},2000);

            //if at last item, reset currentItem to 0