mrmartineau

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

document.onreadystatechange = function() {

	if (ready) {
		return;
	}
	
	// interactive = DOMContentLoaded & complete = window.load

mrmartineau

<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;
	}

mrmartineau

@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*/
  
}

mrmartineau

/* ==========================================================================
   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);

mrmartineau

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

mrmartineau

Fluidbox

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

A Pen by Terry on CodePen.

License.

mrmartineau

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

mrmartineau

{
  "name": "kickoff",
  "version": "1.0.0",
  "dependencies": {
    "bean": "*",
    "bonzo": "*",
    "qwery": "*",
    "lodash": "*",
    "domready": "*"
  },

mrmartineau

-        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

mrmartineau

Example usage for Kickoff's components