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

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

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

$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

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

@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

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

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

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

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

a, abbr, acronym, address, applet, area, article, aside, audio, b, base,
basefont, bdi, bdo, bgsound, big, blink, blockquote, body, br, button, canvas,
caption, center, cite, code, col, colgroup, content, data, datalist, dd, del,
details, dfn, dir, div, dl, dt, em, embed, fieldset, figcaption, figure, font,
footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr,
html, i, iframe, img, input, ins, isindex, kbd, keygen, label, legend, li, link,
listing, main, map, mark, marquee, menu, menuitem, meta, meter, nav, nobr,
noframes, noscript, object, ol, optgroup, option, output, p, param, plaintext,
pre, progress, q, rp, rt, ruby, s, samp, script, section, select, shadow, small,
source, spacer, span, strike, strong, style, sub, summary, sup, table, tbody,

superfine

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version