Zander Martineau mrmartineau

Fluidbox

Replicating and improving the lightbox module seen on Medium with fluid transitions.

	// This is needed to prevent onreadystatechange being run twice
	var ready = false;

	document.onreadystatechange = function() {

	if (ready) {
	return;
	}

	// interactive = DOMContentLoaded & complete = window.load

	<link href='http://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
	<style>
	.zmEbayContainer {
	font-family: Karla, Helvetica Neue;
	color: #2F353A;
	width: 80%;
	background-color: #f1f1f1;
	margin: 50px auto;
	padding: 35px 50px;
	}

	@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (min--moz-device-pixel-ratio: 1.3),
	only screen and (-o-min-device-pixel-ratio: 1.3),
	only screen and (min-resolution: 125dpi),
	only screen and (min-resolution: 1.3dppx) {
	/* Content goes below*/

	}

	/* ==========================================================================
	Reliably get viewport dimensions

	Notes:
	relies on position:fixed support, but it should work in browsers that
	partially support position: fixed like iOS4 and such...

	Usage:
	* $('.spotlight').css( getViewportDimensions() );
	* $('.spotlight').css('height', getViewportDimensions().height);

	String.prototype.substitute = function (object) {
	return this.replace(/\{(.+?)\}/g, function (match, name) {
	return name in object ? object[name] : match;
	});
	};

	- child element
	e.g. .form-controlGroup > .form-controlGroup-label

	-- modifier element
	e.g. .btn.btn--primary

	.is- element state
	e.g. .btn.btn--primary

	aB camel-case descriptors

	a {
	transition: all .3s cubic-bezier(.3,2,.5,.8);
	}