mattwiebe

<?php
/*
Plugin Name: Mobile First Responsive Images
Description: Serve up smaller images to smaller screens.
Version: 0.1.1
Author: Matt Wiebe
Author URI: http://somadesign.ca/
*/

/**

aarongustafson

iframe {
  max-width: 100%;
}

peterwilsoncc

.320up(){

.three20 {
	color: #fff;
}

} /* end 320up mixin */

/* 

jlong

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

greypants

UPDATE: It's a gem!

This helper has finally been moved into a gem called nav_lynx!

https://github.com/vigetlabs/nav_lynx

http://rubygems.org/gems/nav_lynx

Thanks to @brianjlandau and @reagent for getting that set up and tested!

Behold, the nav_link:

elidickinson

<!--[if mso]>
 <center>
 <table><tr><td width="580">
<![endif]-->
 <div style="max-width:580px; margin:0 auto;">
 
 <p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>
 
 </div>
<!--[if mso]>

Integralist

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

• Create new instance of ImageEnhancer
• Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
  • We set the width & height HTML attributes of the image to the required size
  • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
  • We then set a class of image-replace onto each newly created transparent image
• We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe

averyvery

// strip-units required by spread mixin
// http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number)
  @return $number / ($number * 0 + 1)


// pow and sqrt required by ease function
// adapted from https://github.com/at-import/Sassy-math/blob/master/sass/math.scss
@function pow($base, $exponent)
  $value: $base

tristanisfeld

// =========================================================
// Gulp Task: browsersync
// NOTE: Using gulp v4
// Description:  Sync sass, typescript, html, and browser
// using external config or add modify src
// npm install --save-dev browser-sync gulp-typescript gulpjs/gulp.git#4.0 gulp-load-plugins
// Options: node-sass gulp-sass || gulp-ruby-sass
// =========================================================
var config              = require('../config.js');
var browserSync         = require('browser-sync').create();