evanshajed

/sftpCache.json
# Compass / Sass #
##################
.sass-cache
*.scssc
*.sassc

# SublimeText project files
*.sublime-workspace

evanshajed

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

evanshajed

/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */

evanshajed

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T	go to file
⌘⌃P	go to project
⌘R	go to methods
⌃G	go to line
⌘KB	toggle side bar
⌘⇧P	command prompt

evanshajed

/**
 * Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
 * Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
 */

body {
	background: #ccc51c;
	min-height: 100%;
}

evanshajed

/*
 * By Shajed Evan @evanshajed
 * Concept by: CHRIS COYIER @chriscoyier

// Breakpoints
@mixin breakpoint($point) {

  /* Smartphones (portrait and landscape) ----------- */
  @if $point == sp-portrait-lanscape {
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @content; }

evanshajed

// SASS MIXIN for Retina Image Sprite

@mixin retina-sprite-background($name,$normal,$retina){
  background-repeat: no-repeat;
  background-image: sprite-url($normal);
  background-position: sprite-position($normal,$name);
  height:image-height(sprite-file($normal, $name));
  width: image-width(sprite-file($normal, $name));

  // Media Query for retina

evanshajed

/*  Mixin for Compass - border-image
    
    $border-image([$image-url], [$offsets], [$repeats])
    
    Example:
    @include border-image(url(../my_image.png), 10, stretch)
    @include border-image(url(../my_image.png), 10 5 10 5, stretch repeat)

---------------------------------------- */
@mixin border-image($url, $offsets, $repeats)  {

evanshajed

/**
 * PE to use SVG as CSS background image with fallback for IE8/7/6
 *
 * Using SVG as CSS background image to display 
 * resolution-independent logos or icons is pretty
 * awesome but does completely fail on IE8/7/6 
 * 
 * The trick:
 * All three IE versions don't support rgba color values.
 * By defining a rgba background color together with the

evanshajed

.wf-loading .class-name li a{ visibility: visible; }
.wf-inactive .class-name li a{ visibility: visible; }
.wf-active .class-name li a{ font-family: 'Ubuntu Condensed', sans-serif; }