Basic JavaScript application components

main.js

/**
* Provided without license, as is.
*
* @program main.js
*
* @author juanvallejo
* @date 10/7/14
*
* initialize and execute main program
*
* Note: this code serves as template for future main.js files
**/

var wrapper = document.getElementById('wrapper');			// content wrapper #div

/** 
 * Sets the height of the wrapper based on current window heig ht
 * @windowHeight = current height of window 
**/
function setWrapperHeightTo(windowHeight) {
	windowHeight = windowHeight || window.innerHeight;		// sets windowHeight to current window size
 
	wrapper.style.height = windowHeight + 'px';				// sets wrapper style height to windowHeight in pixels
}

/**
 * Define "main" or init function. Gets called immediately after document is loaded.
 * This is because this script is imported after every div declaration. Function autoruns,
 * executing anything that is not event-based.
**/
(function main() {
	// Define and initialize our CircularLoading object API
	var CL = CircularLoading(document.getElementById('circleMain'));

	// Define function to call anytime the window is resized or loaded
	function centerElementPositions() {
		setWrapperHeightTo(window.innerHeight);				//sets wrapper height to the current window height

		//centers the position of div element "circleMain"
		setElementPositionTo(
			[
				(wrapper.clientWidth / 2) - (CL.CircleMain().clientWidth / 2),
				(wrapper.clientHeight / 2) - (CL.CircleMain().clientHeight / 2)
			], 
			CL.CircleMain()
		);
	}

	//reload circleMain animation on circleMain click
	CL.CircleMain().addEventListener('click', function() {
		CL.reset();
		CL.animate(270);
	});

	// Subscribe functions to window events, make sure program runs
	// only when 'window' object is fully loaded.
	events.windowResize.push(centerElementPositions);
	events.windowLoad.push(centerElementPositions);
})();

reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}
/* remember to define focus styles! */
:focus {
	outline: 0;
	}
body {
	line-height: 1;
	color: black;
	background: white;
	}
ol, ul {
	list-style: none;
	}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	text-align: left;
	font-weight: normal;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}
	
/****************************************/
/*               fonts                  */
/****************************************/
@font-face {
font-family: 'carto';
src: 
url('fonts/Nunito-Light.eot?') format('eot'),
url('fonts/CartoGothicStd-Book.ttf') format('truetype');
}

styles.js

/**
* Provided without license, as is.
*
* @program styles.js
*
* @author juanvallejo
* @date 10/7/14
*
* Apply basic styles for specific app templates
*
* Note: this script styles the elements on the page dynamically
* based on changing document dimensions, varying screen sizes. 
**/

/**
 * Define object that will hold dynamic event data as arrays of functions
 * that get called on a window event.
**/
var events = {
	windowLoad:[],
	windowResize:[],
	windowScroll:[]
};

/**
 * Add event listeners to the "window" object and loop through arrays
 * of functions stored in the keys of our "events" object defined above.
**/
window.addEventListener('load', function() {
	events.windowLoad.forEach(function(eventFunction) {
		eventFunction.call(this);
	});
});

window.addEventListener('resize', function() {
	events.windowResize.forEach(function(eventFunction) {
		eventFunction.call(this);
	});
});

window.addEventListener('scroll', function() {
	events.windowScroll.forEach(function(eventFunction) {
		eventFunction.call(this);
	});
});


/** 
 * Sets the height of the wrapper based on current window heig ht
 * @windowHeight = current height of window 
**/
function setWrapperHeightTo(windowHeight) {
	windowHeight = windowHeight || window.innerHeight;		// sets windowHeight to current window size
 
	wrapper.style.height = windowHeight + 'px';				// sets wrapper style height to windowHeight in pixels
}

/**
 * Sets the position of a .circle div based on current window
 * dimensions.
 *
 * @positionArray 	= array of 2 elements containing [width, height]
 * @divElement 		= pointer to the div element to position
**/
function setElementPositionTo(positionArray, divElement) {
	divElement.style.left = positionArray[0] + 'px';		// sets divElement x position
	divElement.style.top = positionArray[1] + 'px';			// sets divElement y height
}

/**
 * Sets the rotation of an element div based on a given degree
 *
 * @degree 			= integer degree
 * @divElement 		= pointer to the div element to rotate
**/
function setElementRotationTo(degree, divElement) {
	divElement.style.transform = 'rotate('+degree+'deg)';				// rotates div
	divElement.style.webkitTransform = 'rotate('+degree+'deg)';			// rotates div on webkit browsers
}