William Dodson williamdodson

## browsersync.js
// =========================================================
// 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();

## spread.sass
// 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

## Description.md

      
              2 files
            
          
              5 forks
            
          
              6 comments
            
          
              73 stars
            
          
                Integralist
                / Description.md
            
            
              Last active
              April 25, 2020 16:20
            
              
                This is how BBC News currently implements it's Image Enhancer for responsive images. Note: this is a completely rebuilt version of the code so the BBC's original source code doesn't actually look anything like the below example.
              
          
    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


## max_width_email.html
<!--[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]>

## README.markdown

      
              2 files
            
          
              20 forks
            
          
              20 comments
            
          
              59 stars
            
          
                greypants
                / README.markdown
            
            
              Last active
              October 17, 2023 05:49
                — forked from reagent/nav_link.rb
            
              
                RAILS 3: nav_link helper for adding 'selected' class to navigation elements
              
          
    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:


## uri.js
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"

## 320up.less
.320up(){

.three20 {
	color: #fff;
}

} /* end 320up mixin */

/*

## responsive-iframes.css
iframe {
  max-width: 100%;
}

## responsive-images.php
<?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/
*/

/**

## tabledisplaytest.html
<!DOCTYPE html>
<html>
<head>
<title>Table Display test</title>
<style>
@media screen and (min-width: 30em) {
	body {
		display: table;
		caption-side: top;
	}
	// =========================================================
	// 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();
	// 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
	<!--[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]>
	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"
	<?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/
	*/

	/**
	<!DOCTYPE html>
	<html>
	<head>
	<title>Table Display test</title>
	<style>
	@media screen and (min-width: 30em) {
	body {
	display: table;
	caption-side: top;
	}