seutje

I totally agree with you on the point that it's a way better idea to tailor for conditions rather than predefined devices/browsers/platforms, but the problem with "responsive webdesign" (hate that buzzword btw) is that there doesn't seem to be a way to set conditions for things like download speed.

for instance: every1 seems to assume that mobile devices have a crappy connection by definition, but I'd say there's a world of difference between say, a mobile device on EDGE or one on 3G, or even one on speedy wifies. Or the other side of it: a 17" laptop on a 3G stick (or tethering over a phone) vs one on a cable modem. Regardless of viewport size, you might want to present the user on 3G with a link to an image, allowing them to decide if they want to load it up, and present the user on a cable modem with the image straight up. This is just a quick example off the top of my head, but I'm sure others can think of more examples...

Also, I've noticed that most ppl struggle with doing "responsive webdesign" right

seutje

;(function($){

  $.fn.balloons = function(options) {
    var balloons = this,
        cssAnim = Modernizr && Modernizr.cssanimations,
        opts = $.extend({}, $.fn.balloons.defaults, options),
        /* Helper function to return random range */
        getRand = function(min, max) {
          return Math.floor(Math.random() * (min-max+1)) + max;
        },

seutje

/**
 * takes a jQuery collection and wraps each x items with element y
 * kinda nasty looking though
 * Example: $('#foo').children().wrapInChunks('<div></div>', 2);
 * would wrap every 2 children of #foo with a div
 */
jQuery.fn.wrapInChunks = function(html, chunkSize) {
    chunkSize = chunkSize || 1;
    var items = this.get(),
        rows = [],

seutje

/* CSS3Please.com gradient mixin */
@mixin gradient($begin, $end) {
  background-color: $begin;
  background-image: -moz-linear-gradient(top, $begin, $end); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $begin),color-stop(1, $end)); /* Saf4+, Chrome */
  background-image: linear-gradient(top, $begin, $end);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$begin', EndColorStr='$end'); /* IE6–IE9 */
  @include has-layout;
}

seutje

$defWidth: 960px; /* Default page width */
$defGut: 10px; /* Default single gutter size */
$defAm: 12; /* Default amount of columns */

@mixin container($num, $amount: $defAm, $width: $defWidth) {
  margin-left: auto;
  margin-right: auto;
  width: ($width/$amount)*$num;
  position: relative;
  @extend .clearfix;

seutje

(function(a){var b=[],c="";a("[id]").each(function(c,d){if(a("[id="+this.id+"]").length>1){b.push(this.id)}});if(b.length){c="Druplicate IDs: "+b.join(", ");window.console&&window.console.log?window.console.log(c):window.alert(c)}})(jQuery)

seutje

(function($) {
  jQuery.fn.replaceClass = function(toReplace,replaceWith){
    return this.each(function(){
      return $(this).removeClass(toReplace).addClass(replaceWith);
    });
  }
})(jQuery);

seutje

http://jsbin.com/utigo5/2/edit

seutje

(function($) {

/**
 * Put numbers after all links and list em at the bottom of the body
 */
Drupal.behaviors.printLinks = function(context) {
  var printLinks = Drupal.printLinks,
      exceptions = ([
        'ul.menu a'
      ]).join(', ');

seutje

  // Expose the Array.reverse() method on jQuery objects
  $.fn.reverse = [].reverse;
  /**
   * takes a jQuery collection and wraps each x items with element y
   * kinda nasty looking though
   * example: $('.foo').children().wrapInChunks('<div class="bar" />', 3);
   * wraps every 3 children of .foo in div.bar
   * NOTE: Needs a way to distinguish the wrapper from the wrapped elements,
   * ergo, wrapping classless, IDless DIVs with classless, IDless DIVs will error out
   */