KATT

// Handlebar helper
Handlebars.registerHelper('or', function () {
  var args = arguments;

  for (var i in args) {
    if (args[i]) {
      return args[i];
    }
  }
  return null;

KATT

@mixin background-image2x($image, $extension: 'png') {
  $imageOrig: "#{$image}.#{$extension}";
  $image2x: "#{$image}@2x.#{$extension}";

  $width: image-width($imageOrig);
  $height: image-height($imageOrig);

  background-image: image-url($imageOrig);

KATT

@mixin responsive-full-width-image($image) {
  @include box-sizing(content-box);

  width: 100%;

  padding-top: percentage(image-height($image) / image-width($image));
  background-image: image-url($image);
  background-repeat: no-repeat;
  background-size: contain;

KATT

// declare in your variables-file
$relative-image-path = '../images/';
$retina = '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)';



responsive-image($image) {
  $path = $relative-image-path + $image;

  $ext = extname($path);

KATT

A Pen by Alexander Johansson

A Pen by Alexander Johansson on CodePen.

License.

KATT

class Menu 
  constructor: (@$el) ->
    @isOpen = false

    @$el.on 'click', '.menu-toggle', => @toggleMenu()
  toggleMenu:
    @$el.toggleClass 'open', !@isOpen

    @isOpen = !@isOpen

KATT

<img src="images/header.png" data-srcorig="images/[email protected]">

KATT

// Uses CSS hack in order to make an element maintain the aspect ratio of supplied background-image
// Latest version available @ https://gist.github.com/KATT/8283246
// Demo @ http://codepen.io/KATT/pen/yBrni
responsive-image($image, $width = false, $height = false) {
  $external = match('^https?:\/\/', $image);

  error('expect width and height on external images') if $external and !($width or $height)

  unless $width and $height {
    $size = image-size($image);

KATT

//
//  US2TapFriendlyButton.h
//
//  Created by Alexander Johansson on 14/01/2014.
//
//

#import <UIKit/UIKit.h>

@interface US2TapFriendlyButton : UIButton

KATT

background-x2image($image) {
  $ext = extname($image);
  $image2x = pathjoin(dirname($image), basename($image, $ext) + '@2x' + $ext);

  background-image: url($public-image-path + $image);

  @media $retina {
    background-image: url($public-image-path + $image2x);
  }
}