T-Mobile The Source

Project Summary

The purpose of The Source was to provide information for existing customers to retain their loyalty. As a front-end developer for GLG, my job was to build this responsive/adaptive hybrid WordPress site for T-Mobile.

What I Did

  • front–end development

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • responsive/adaptive hybrid site
  • WordPress
  • SVN Version Control, Tortoise SVN

Front-end Development

The tricky part about building this site was that it had several design restrictions, which is why we decided to build it as a responsive/adaptive hybrid site. The 1 column layout is responsive, and the 2 and 3 column layouts are adaptive.

T-Mobile also had several of their own requirements, so it was important to write efficient code that could easily scale.

Here's my JavaScript:


Tmobile = {};

Tmobile.isNavOpen = false;
Tmobile.pageWidth = 0;
Tmobile.currentPage = window.location.pathname;
Tmobile.navOpenPages = ['/','/devices/','/featured/','/apps/','/network/','/tips-and-tricks/'];

Tmobile.helpers = {

	navShow: function _ths(){
		_ths.i = _ths.i || 0;
		//console.log(_ths.i++ + ' show');
		Tmobile.isNavOpen = true;
		$('#collapsed-nav-btn').css('background-position', '0px -42px');
		$('#main-nav').slideDown();
		Tmobile.helpers.setSlider();
	},

	navHide: function _ths(){
		_ths.i = _ths.i || 0;
		//console.log(_ths.i++ + ' hide');
		Tmobile.isNavOpen = false;
		$('#collapsed-nav-btn').css('background-position', '0px 0px');
		$('#main-nav').slideUp();
		Tmobile.helpers.setSlider();
	},

	toggleNav: function(){
		if(Tmobile.isNavOpen === false){
			Tmobile.helpers.navShow();
		} else {
			Tmobile.helpers.navHide();
		}
	},

	setNav: function(){
	    var width = document.documentElement.clientWidth;
	    if(width >= 1000){
	    	Tmobile.helpers.navShow();
	    	$('#collapsed-nav-btn').hide(0);
	    	$('.article-crumb').show();
	    } else if (width >= 680 && width < 1000){
	    	$('#collapsed-nav-btn').show();
	    	$('.article-crumb').show();
			if ($.inArray(Tmobile.currentPage,Tmobile.navOpenPages) >= 0){
				Tmobile.helpers.navShow();
			} else {
				Tmobile.helpers.navHide();
			}
	    } else if (width < 680) {
	    	$('.article-crumb').hide();
	    	//$('#collapsed-nav-btn').show();
			//Tmobile.helpers.navHide();
			//$('#collapsed-nav-btn').css('background-position', '0px 0px');
			//$('#main-nav').css('display', 'none');
	    }
	},

	setSlider: function(){
		if(document.documentElement.clientWidth >= 1000) {
			$('.homeslider').removeClass('col1-responsive').removeClass('col1').addClass('col2');
		} else if(document.documentElement.clientWidth >= 680 && document.documentElement.clientWidth < 1000){
			if (Tmobile.isNavOpen){
				$('.homeslider').removeClass('col1-responsive').removeClass('col2').addClass('col1');
			} else {
				$('.homeslider').removeClass('col1').removeClass('col1-responsive').addClass('col2');
			}
	    } else if(document.documentElement.clientWidth < 680){
	    	$('.homeslider').removeClass('col1').removeClass('col2').addClass('col1-responsive');
	    }
	},

	setVideo: function(){
		if(document.documentElement.clientWidth >= 680) {
			if($(".ie8").length > 0){
				setTimeout(
					function(){
						$('.post-content object, .post-content iframe, .post-content span').css({
							'max-width' : '620px',
							'width' : '620px',
							'height' : '300px'
						});
					}

				, 800);
			}else{
				$('.post-content object, .post-content iframe, .post-content span').css({
							'max-width' : '620px',
							'width' : '620px',
							'height' : '300px'
						});
			}

		} else if(document.documentElement.clientWidth < 680){
			var containerWidth = $('.container').width();
			
			$('.post-content object, .post-content iframe').css({
				'max-width' : containerWidth,
				'width' : containerWidth,
				'height' : '300px'
			});
		}
	},
	
	adjustWidth: function _ths(){
		Tmobile.pageWidth = $('.container').outerWidth();
		//console.dir(Tmobile.pageWidth);
		Tmobile.helpers.setNav();
		if(!_ths.isInit) {
			$('#collapsed-nav-btn').on('click', Tmobile.helpers.toggleNav);
			_ths.isInit = true;
		}
		Tmobile.helpers.setSlider();
		Tmobile.helpers.setVideo();
	},
	
	init: function(){
		Tmobile.helpers.setNav();
		Tmobile.helpers.setSlider();
		Tmobile.helpers.setVideo();
	}
};

$(document).ready(function(){
	Tmobile.helpers.init();

	//set page width
	var widthTimeOut = null;
	var doAdjustWidth = function(){Tmobile.helpers.adjustWidth()};

	window.onresize = function(){
		if(widthTimeOut != null){
			clearTimeout(widthTimeOut);
		}
		widthTimeOut = setTimeout(doAdjustWidth, 100);
	};

	window.onorientationchange = function(){
		Tmobile.helpers.adjustWidth();
	};

	//if on article page, gray out radio btn labels
	$('.ie8 .single-post .w-devices input[type="radio"]').each(function(){
		if($(this).attr('disabled') == 'disabled'){
			$(this).next('label').css('color', '#999');
		} else {
			$(this).next('label').css('color', '#242424');
		}
	});
	$('.ie8 #footer-links ul:first li:last').addClass("no-after");
});

$(window).load(function(){
	Tmobile.helpers.adjustWidth();
});

Here's my main CSS file. There are several workarounds for some of the WordPress plugins we used.


/* ============================= */
/* Global & 1 Column Layout      */
/* ============================= */
body, html {
  height: 100%;
  min-width: 300px;
  background-color: #fff;
  color: #242424;
  font-family: Arial, Verdana, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}
img, embed, video, object {
	max-width: 100%;
}
p, ol, ul, time {
  padding: 0.5em 0;
  font-size: 1em;
}
a {
	text-decoration: none;
	color: #e20074;
}
a:hover {
	color: #6a6a6a;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.25em;
	padding: 0.5em 0;
}
h1 {
	font-size: 1.25em;
}
h2 {
	font-size: 1.2em;
}
h3 {
	font-size: 1.15em;
}
h4 {
	font-size: 1.1em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: 0.9em;
}
p {
	font-size: 0.75em;
}
i {
  font-style: italic;
}
em {
  font-weight: bold;
}
#container {
	min-width: 300px;
	margin: 0 auto;
	margin-bottom: -0.5em;
}
.container {
	padding: 0 5%;
}

/***** Header *****/
#main-header {
	padding-top: 0.25em;
}
h2#logo {
	margin: 0.25em 0 0.5em 0;
	padding: 0;
	text-indent: -999999px;
	width: 134px;
	height: 22px;
	background: url('../images/main-sprite.png') no-repeat 0px -88px;
}
h2#logo a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 22px;
}
h1#tagline {
	position: relative;
	margin: 0.5em 0 0 0;
	padding: 0;
	text-indent: -999999px;
	width: 210px;
	height: 26px;
	background: url('../images/main-sprite.png') 0px -143px;
}
h1#tagline a {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%;
	height: 24px;
}
h3#sub-tagline {
	font-size: 0.65em;
	font-style: italic;
	font-weight: bold;
	color: #767676;
	padding: 0.25em 0 1em 0;
	text-transform: uppercase;
}
#main-nav {
	padding: 0;
	display: none;
}
#collapsed-nav-btn {
	background: url('../images/main-sprite.png') no-repeat 0px 0px;
	margin: -2.25em 0 0.5em 0;
	width: 40px;
	height: 40px;
	float: right;
	position: relative;
	bottom: 0;
}
#main-nav .menu li {
	margin: 0.25em 0;
	text-transform: uppercase;
	font-size: 1.5em;
	background-color: #4d4d4d;
	background-image: linear-gradient(bottom, #4d4d4d 50%, #585858 25%);
	background-image: -o-linear-gradient(bottom, #4d4d4d 50%, #585858 25%);
	background-image: -moz-linear-gradient(bottom, #4d4d4d 50%, #585858 25%);
	background-image: -webkit-linear-gradient(bottom, #4d4d4d 50%, #585858 25%);
	background-image: -ms-linear-gradient(bottom, #4d4d4d 50%, #585858 25%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.5, rgb(77,77,77)),
		color-stop(0.5, rgba(215,215,215,0.1))
	);
}
.no-cssgradients #main-nav .menu li {
	background: url('../images/main-sprite.png') repeat 0px -210px;
}
#main-nav .menu li:after {
	content: "\00A0";
	background: url('../images/main-sprite.png') -40px 0px;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0.29em 5% 0 0;
	width: 15px;
	height: 26px;
	color: #fff;
	font-weight: bold;
}
#main-nav .menu li a {
	display: block;
	width: 100%;
	padding: 0.325em 5%;
	color: #fff;
}
#main-nav .menu li.current-menu-item {
	background-color: #d7d7d7;
	background-image: linear-gradient(bottom, #d7d7d7 50%, #e2e2e2 25%);
	background-image: -o-linear-gradient(bottom, #d7d7d7 50%, #e2e2e2 25%);
	background-image: -moz-linear-gradient(bottom, #d7d7d7 50%, #e2e2e2 25%);
	background-image: -webkit-linear-gradient(bottom, #d7d7d7 50%, #e2e2e2 25%);
	background-image: -ms-linear-gradient(bottom, #d7d7d7 50%, #e2e2e2 25%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.5, rgb(215,215,215)),
		color-stop(0.5, rgba(255,255,255,0.3))
	);
}
.no-cssgradients #main-nav .menu li.current-menu-item {
	background: url('../images/main-sprite.png') repeat 0px -252px;
}
#main-nav .menu li.current-menu-item a{
	color: #e20074;
}
#main-nav .sub-menu {
	background-color: #fff;
	margin: 0.25em 0 0 0;
	padding: 0.25em 0 0 10%;
}
#main-nav .sub-menu li {
	margin: 0;
	padding: 0.25em 2.5% 0.25em 10%;
	background-color: #d7d7d7;
	font-size: 0.75em;
	text-transform: none;
	font-style: italic;
	font-weight: normal;
	list-style-image: url('../images/main-sprite.png') -40px 0px;
}
#main-nav .sub-menu li:before {
	content: ">";
	font-size: 0.6em;
	font-weight: bold;
	float: left;
	padding: 0.75em 5px 0 0;
}
#main-nav .sub-menu li:after {
	background: none;
}
#main-nav .sub-menu a {
	color: #242424;
}
#main-nav .w-devices {
	padding: 0 5% 5em 5%;
	margin-bottom: 1em;
	font-size: 0.7em;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e4e4e4));
	background: -webkit-linear-gradient(top, #fff, #e4e4e4);
	background: -moz-linear-gradient(top, #fff, #e4e4e4);
	background: -ms-linear-gradient(top, #fff, #e4e4e4);
	background: -o-linear-gradient(top, #fff, #e4e4e4);
}
.no-cssgradients #main-nav .w-devices {
	background: url('../images/main-sprite.png') repeat 0px -395px;
}
#main-nav .w-devices p {
	padding-bottom: 0em;
}
.w-devices li {
	float: left;
	width: 48%;
	margin-right: 2%;
	height: 22px;
}
#main-nav .w-devices li:after {
	content: none;
}
.w-devices input[type="radio"] {
	position: absolute;
	top: 0px;
	left: 1px;
	height: 22px;
	opacity: 0;
}
.no-opacity .w-devices input[type="radio"] {
	top: 1px;
}
.w-devices input[type="radio"]:hover, .w-devices input[type="radio"] + label:hover {
	cursor: pointer;
}
.w-devices input[type="radio"] + label {
	background: url('../images/main-sprite.png') no-repeat -292px -16px;
	padding: 1px 0 1px 22px;
	height: 26px;
	font-family: 'Swiss721BT-Medium', Arial, Verdana, sans-serif;
}
.w-devices input[type="radio"]:checked + label {
	background-position: -292px 2px;
}
.w-devices input[type="radio"]:disabled + label {
	background-position: -292px -34px;
	color: #999;
}
.single-post .w-devices p {
	color: #999;
}
.w-devices label {
	text-transform: none;
	font-weight: bolder;
	background-image: none;
}
#crumbs {
	position: absolute;
	top: 7.75em;
	left: 5%;
	font-size: 0.75em;
	font-weight: bolder;
}
#crumbs li {
	display: inline;
	padding-left: 5px;
	color: #6a6a6a;
}
#crumbs li:first-of-type {
	padding-left: 0;
}
#crumbs li a {
	color: #6a6a6a;
}
#crumbs li span {
	padding-left: 5px;
}
#crumbs li:first-of-type span {
	padding-left: 0;
}
#crumbs li a:hover, #crumbs li a:focus {
	color: #e20074;
}
 
/******** Content ********/
/*** Homepage slider ***/
.homeslider {
	margin: 0 0 1em 0;
	padding: 0 5%;
}

/*** Post Tiles ***/
.post-tile, .widget-container, .gp {
	position: relative;
	margin: 1em 5%;
	overflow: hidden;
	background-color: #eeeeee;
	background: -webkit-gradient(linear, left top, right top, from(#dcdcdc), color-stop(0.25, #fff), color-stop(0.5, #fff), color-stop(0.75, #fff), to(#dcdcdc));
	background: -webkit-linear-gradient(top, #dcdcdc, #fff, #fff, #fff, #dcdcdc);
	background: -moz-linear-gradient(top, #dcdcdc, #fff, #fff, #fff, #dcdcdc);
	background: -ms-linear-gradient(top, #dcdcdc, #fff, #fff, #fff, #dcdcdc);
	background: -o-linear-gradient(top, #dcdcdc, #fff, #fff, #fff, #dcdcdc);
}
.new-post:after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: "\00A0";
	background: url('../images/main-sprite.png') -224px 0px;
	width: 30px;
	height: 30px;
}
a.post-tile-link {
	color: #242424;
}
.post-tile .container {
	height: 120px;
	padding: 0.5em 5%;
	font-size: 0.85em;
	line-height: 1.5em;
}
.post-tile .container span {
	font-weight: bolder;
	color: #e20074;
}
/*** share widgets ***/
.widget-container, .gp {
	height: 225px;
}
.gp {
	color: #242424 !important;
	width: auto !important;
	border: none !important;
	border-radius: 0px !important;
	font-weight: normal !important;
}
.gp_logo {
	border: none !important;
	background: none !important;
	height: 0 !important;
}
.fbf_facebook_page_widget_container, .widget_twitter li:first-of-type, li.gp .gp_stream { /* content blocks for all share widgets */
	display: block;
	height: 100px;
	overflow: hidden;
	padding: 0.5em 5%;
	margin-top: 70px;
	font-size: 0.85em;
	background: none !important;
}
.widget_twitter span.entry-content {
	padding-left: 0;
}
.widget_twitter li {
	display: none;
}
.widget-container .widget-title, .widget-container img, .widget_twitter span.intent-meta, .widget_twitter span.entry-meta, .widget_twitter .follow-button, .gp_title, .facebook_page-timestamp {
	display: none;
}
#facebookpagefeedwidget-2:before, #twitter-2:before, .gp:before {
	position: absolute;
	top: 2.4em;
	left: 70px;
	content: "\00A0";
	width: 180px;
	height: 12px;
}
#facebookpagefeedwidget-2:before, #twitter-2:before, .gp:before {
	background: url('../images/main-sprite.png') 0px -197px;
}
#facebookpagefeedwidget-2:after, #twitter-2:after, .gp:after {
	position: absolute;
	top: 1.5em;
	left: 5%;
	content: "\00A0";
	width: 40px;
	height: 40px;
}
#facebookpagefeedwidget-2:after {
	background: url('../images/main-sprite.png') -56px 0px;
}
#twitter-2:after {
	background: url('../images/main-sprite.png') -98px 0px;
}
.gp:after {
	background: url('../images/main-sprite.png') -140px 0px;
}

/*** Posts/Articles ***/
.prev-article {
	float: left;
	padding: 8px 0 0 40px;
	margin: 0.5em 0 0 0;
}
.next-article {
	float: right;
	text-align: right;
	padding: 8px 40px 0 0;
	margin: 0.5em 0 0 0;
}
.prev-article a, .next-article a {
	color: #242424;
	font-size: 0.75em;
}
.prev-article a:before {
	position: absolute;
	top: 10px;
	left: 10px;
	content: "\00A0";
	background: url('../images/main-sprite.png') no-repeat -42px -42px;
	width: 20px;
	height: 20px;
}
.next-article a:after {
	position: absolute;
	top: 10px;
	right: 10px;
	content: "\00A0";
	background: url('../images/main-sprite.png') no-repeat -64px -42px;
	width: 20px;
	height: 20px;
}
.post-content {
	margin-top: 0.25em;
}
.post-content .post-image img {
	width: 100% !important;
	height: auto;
}
.post-content .post-image span{
	display:block !important;
	width:100%;
	height:100%;
}
.post-content h1 {
	text-transform: uppercase;
	font-size: 1em;
	font-style: italic;
	padding-top: 0;
	padding-bottom: 0.25em;
}
.post-content h1 span {
	text-transform: none;
}
.post-content sup {
	font-size: 9px;
}
.post-content p, .post-content ul, .post-content ol, .post-content table td {
	line-height: 1.5em;
	font-size: 0.75em;
}
.post-content em {
	font-weight: normal;
	font-style: italic;
}
.post-content table {
	margin: 1em 0;
}
.post-content table td {
	vertical-align: top;
	padding-bottom: 0.5em;
}
.post-content table td h2 {
	line-height: 1em;
	font-size: 1em;
	padding: 0;
}
.post-content table .alignleft, .post-content table .alignright {
	margin-bottom: 0;
}
.post-content table td sup {
	position: relative;
	top: -0.3em;
	vertical-align: baseline;
}
.post-content table td p, .post-content table td ul, .post-content table td ol, .post-content table td li {
	font-size: 1em;
}
.post-content ul li {
	list-style-type: square;
	margin-left: 20px;
}
.post-content ol li {
	list-style-type: decimal;
	margin-left: 20px;
}
.post-content ul li, .post-content ol li, .post-content table ul li, .post-content table ol li {
	line-height: 1.75em;
}
.post-content blockquote {
	padding-left: 5%;
	padding-right: 5%;
	font-style: italic;
}
.article-cta {
	font-weight: bold;
	text-transform: uppercase;
	font-style: italic;
}
.article-cta:after {
	content: "›";
	padding-left: 3px;
	display: inline;
	font-size: 1.5em;
	vertical-align: -1px;
}
.addthis_toolbox {
	margin: 2em 0 0.5em 0;
}
.addthis_button_compact{
	display: none
}
.ratings {
	padding: 0.5em 0;
	width: 100%;
}
.ratings a {
	text-indent: -999999px !important;
}
.rating-title {
	float: left;
	font-size: 0.8em;
	padding: 0 10px 0.5em 0;
}
.pagination {
	margin: 0 0 1em 0;
	text-align: right;
}
.pagination a {
	padding: 10px 15px !important;
	border: 2px solid #b3b3b3 !important;
}
.pagination .current {
	background-color: #e8e8e8 !important;
	color: #b3b3b3;
	border: 2px solid #b3b3b3 !important;
	padding: 10px 15px;
}
.pagination .first, .pagination .last {
	display: none;
}
.pagination a.nextpostslink, .pagination a.previouspostslink {
	background-color: #e20074 !important;
	color: #fff !important;
	border: 2px solid #e20074 !important;
}
.pagination .extend {
	border: none;
}
/* article legal */
.legal p {
	font-size: 0.7em;
	font-style: italic;
	color: #6a6a6a;
	line-height: 1.25em;
}

/* Sitemap page */
#sitemap ul li {
	list-style-type: square;
	list-style-position: inside;
}

/* 404 page */
.error-msg {
	margin: 1em 0 5em 0;
}

/***** Footer *****/
.opt-in {
	padding: 1em 5%;
}
.opt-in a {
	font-size: 1em;
	font-weight: bolder;
	font-style: italic;
	text-transform: uppercase;
}
.opt-in:before {
	float: left;
	margin-top: -10px;
	margin-right: 5px;
	content: "\00A0";
	background: url('../images/main-sprite.png') no-repeat -85px -42px;
	height: 42px;
	width: 42px;
}
#footer {
	margin: 0.5em 5% -2em 5%;
	padding-top: 1em;
	padding-bottom: 1.5em;
	background-color: #dcdcdc;
	color: #767676;
	font-size: 0.75em;
}
#social-icons {
	padding: 0.5em 0;
	width: 100%;
	display: inline-block;
}
#social-icons p {
	float: left;
	padding: 0 4px 0 0;
	font-size: 0.9em;
	font-style: italic;
	text-transform: uppercase;
	font-weight: bolder;
}
#social-icons li a {
	position: relative;
	padding: 0;
	margin: 0 1.25%;
	width: 40px;
	height: 40px;
	float: left;
	text-indent: -999999px;
}
.facebook a {
	background: url('../images/main-sprite.png') -56px 0px;
}
.twitter a {
	background: url('../images/main-sprite.png') -98px 0px;
}
.google a {
	background: url('../images/main-sprite.png') -140px 0px;
}
.youtube a {
	background: url('../images/main-sprite.png') -182px 0px;
}
#pre-footer {
	width: 100%;
}
#footer-links ul {
	display: block;
	width: 100%;
}
#footer-links li {
	float: left;
	padding-right: 20px;
}
#footer-links li:after {
	content: "|";
	padding-left: 20px;
}
#footer-links li:last-of-type:after {
	content: none;
}
.footer-legal-links {
	display: block;
	float: left;
	padding: 1em 0;
}
#footer-links .footer-legal-links li:after {
	content: none;
}
#footer-links a, #footer-links li{
	border:none;
}
.footer-legal-links a {
	color: #767676;
}
#footer-links p a {
	display: inline-block;
	width: 100%;
	font-size: 1.25em;
}
#footer-links p a {
	color: #767676;
}
.footer-legal-links a {
	color: #000;
}
.footer-legal-links a:hover, .footer-legal-links a:focus {
	color: #767676;
}
#footer-links p a:hover, #footer-links p a:focus {
	color: #e20074;
}
#footer-links li.no-after:after{content: "" !important;}

@media screen and (min-width: 400px){
	.fbf_facebook_page_widget_container, .widget_twitter span.entry-content, .gp .gp_stream {
		padding: 0.5em 5%;
	}
	#facebookpagefeedwidget-2:before, #twitter-2:before, .gp:before {
		left: 90px;
	}
	#facebookpagefeedwidget-2:after, #twitter-2:after, .gp:after {
		left: 5%;
	}
	.widget_twitter span.entry-content {
		padding-left: 0;
	}
}
@media screen and (min-width: 481px){
	#main-header {
		padding: 0.25em 10% 0 10%;
	}
	#crumbs {
		left: 10%;
	}
	#main-nav .w-devices {
		font-size: 0.85em;
		font-weight: normal;
	}
	#main-nav .w-devices p {
		font-size: 0.9em;
	}
	.homeslider {
		padding: 0 10%;
	}
	.post-content {
		padding: 0 5%;
	}
	.post-tile {
		margin: 1em 10%;
	}
	.widget-container {
		margin: 1em 10%;
	}
	.gp {
		margin: 1em 10%;
	}
	.pagination {
		margin: 1em 5%;
	}
	.opt-in {
		padding: 1em 10%;
		font-size: 0.7em;
	}
	#footer {
		margin: 0.5em 10% -2em 10%;
	}
}

/* ============================== */
/* 2 Column Layout                */
/* ============================== */
@media screen and (min-width: 680px){
	#container {
		max-width: 640px;
	}
	.container {
		padding: 0;
	}
	#main-header {
		max-width: 620px;
		padding: 0.25em 0 0 0;
	}
	#collapsed-nav-btn {
		position: absolute;
		top: 5em;
		right: 20px;
	}
	h2#logo {
		float: left;
		padding-left: 0;
		margin-top: 0.5em;
		width: 147px;
		height: 24px;
		background: url('../images/main-sprite.png') no-repeat 0 -115px;
	}
	h2#logo a {
		width: 147px;
		height: 40px;
	}
	h1#tagline {
		float: left;
		margin-top: 0.5em;
		margin-left: 15px;
		background: url('../images/main-sprite.png') no-repeat 0 -169px;
		width: 222px;
	}
	h3#sub-tagline {
		float: left;
		padding: 0.8em 0 0 2px;
		font-size: 0.7em;
	}
	#crumbs {
		top: 5.5em;
		left: 0;
		z-index: 10;
	}
	#main-nav-container {
		float: right;
		position: relative;
		height: 300px;
		margin: 0;
	}
	#main-nav {
		position: absolute;
		top: 1.1em;
		right: 0;
		width: 300px;
		height: 306px;
		z-index: 100;
		overflow: hidden;
		background-color: #fff;
		margin-top: 0;
	}
	#main-nav .menu {
		background-color: #fff;
		padding: 0;
		margin-top: 5px;
	}
	#main-nav .menu li:first-of-type {
		margin-top: 0;
	}
	#main-nav .w-devices {
		font-size: 0.7em;
		padding-bottom: 0.25em;
		background: none;
		background-color: #fff;
	}
	#main-nav .w-devices p {
		font-size: 1em;
		padding: 0;
	}
	#main-nav .w-devices ul {
		padding: 0;
		width: 100%;
	}
	.w-devices li {
		width: 42%;
		margin-right: 2%;
		height: 24px;
	}
	.w-devices input[type="radio"] {
		height: 24px;
	}
	.w-devices input[type="radio"] + label {
		background-position: -292px -18px;
		padding-bottom: 1px;
	}
	.w-devices input[type="radio"]:checked + label {
		background-position: -292px 0px;
	}
	.w-devices input[type="radio"]:disabled + label {
		background-position: -292px -36px;
	}
	.homeslider {
		padding: 1em 0 0.5em 0;
		margin: 0.5em 0 0 0;
	}
	.orbit-wrapper {
		position: absolute;
		top: 0;
		left: 0;
	}
	.post-content {
		max-width: 620px;
		padding: 1.15em 0 0 0;
	}
	.post-content h1 {
		font-size: 1.25em;
	}
	.post-content .post-image {
		max-height: 300px;
		overflow: hidden;
	}
	.post-tile, .widget-container, .gp {
		float: left;
		width: 300px;
		height: 300px;
		padding: 0;
		margin: 10px 20px 10px 0;
	}
	.widget-container, .gp {
		height: 225px !important;
	}
	#facebookpagefeedwidget-2:before, #twitter-2:before, .gp:before {
		left: 70px;
	}
	.no-cssgradients .post-tile {
		background: url('../images/main-sprite.png') no-repeat 0px -294px;
	}
	.no-cssgradients .widget-container, .no-cssgradients .gp {
		background: url('../images/main-sprite.png') no-repeat 0px -596px;
	}
	.widget_twitter span.entry-content {
		padding-left: 0;
	}
	.gp {
		width: 300px !important;
		height: 225px !important;
		margin: 10px 20px 10px 0 !important;
	}
	.opt-in {
		padding: 1em 0;
		font-size: 0.7em;
	}
	.pagination {
		float: right;
		margin: 0 20px;
	}
	#footer {
		max-width: 580px;
		margin: 0.5em 0 -2em 0;
		padding: 1em 20px;
	}
	#social-icons {
		float: left;
		width: 44%;
	}
	#footer-links {
		float: left;
		width: 51.5%;
		margin-left: 2.5%;
	}
	#footer-links li {
		padding-right: 15px;
	}
	#footer-links li:after {
		padding-left: 15px;
	}
	#footer-links .footer-legal-links li {
		padding-right: 40px;
	}
}

/* ============================== */
/* 3 Column Layout                */
/* ============================== */
@media screen and (min-width: 1000px){
	#container {
		max-width: 960px;
		margin: 0 auto;
	}
	#main-header {
		max-width: 940px;
		padding: 1.25em 0 0 0;
	}
	h3#sub-tagline {
		padding: 22px 0 0 1px;
	}
	#main-nav-container {
		position: relative;
		height: 320px;
		margin: -1em 0 10px 0;
	}
	#main-nav {
		position: relative;
		float: right;
		width: 300px;
		height: 300px;
		margin: 0;
		padding: 0;
	}
	#main-nav .menu {
		padding-bottom: 0;
	}
	.w-devices {
		padding: 0 5% 0 5%;
		margin-top: 0;
	}
	.post-content {
		float: left;
		width: 620px;
		margin: -0.65em 20px 0 0;
	}
	article.col-height-1 {
		height: 625px;
		overflow: hidden;
	}
	article.col-height-2 {
		height: 945px;
		overflow: hidden;
	}
	article.col-height-3 {
		height: 1265px;
		overflow: hidden;
	}
	article.col-height-4 {
		height: 1585px;
		overflow: hidden;
	}
	article.col-height-5 {
		height: 1905px;
		overflow: hidden;
	}
	article.col-height-6 {
		height: 2225px;
		overflow: hidden;
	}
	article.col-height-7 {
		height: 2545px;
		overflow: hidden;
	}
	article.col-height-8 {
		height: 2865px;
		overflow: hidden;
	}
	.homeslider {
		float: left;
		width: 620px;
		height: 300px !important;
		overflow: hidden !important;
		margin: 0 20px 9px 0;
		padding: 0;
	}
	.pagination .first, .pagination .last {
		display: inline;
	}
	.prev-article, .next-article {
		margin: 0.25em 0 0 0;
	}
	#footer {
		max-width: 920px;
		margin-right: 20px;
	}
	#social-icons {
		width: 30%;
	}
	#footer-links {
		width: 67.5%;
		margin-left: 2.5%;
	}
	#footer-links li {
		padding-right: 15px;
	}
}

The image slider was particularly interesting because it needed to be responsive and adaptive. The most logical thing to do for this was to have JavaScript add and remove classes from the container of the slider so the CSS could change entirely for the different layouts.

Responsive slider for the 1 column design:
1 column slider
Adaptive slider for the 2 column design with the nav menu closed:
2 column slider with nav closed
Adaptive slider for the 2 column design with the nav menu open:
2 column slider with nav open
Adaptive slider for the 3 column design:
3 column slider

Another thing you might notice is that there are actually 2 images for each slide. There's an overlay image that contains text on top of the larger image in the back. Because the slider gets much smaller for the 2 column design when the nav is open, we needed to allow T-Mobile control over the positioning of both images for each slide. They can choose to align both images any combination of left, right, or center. The positioning of these images are done entirely with CSS and media queries. In the example above, both images in that slide are aligned left. If the background was aligned right and the overlay left, this is what the slide would look like:

3 column slider
3 column slider

Here's the CSS for the slider:


/*** auto settings ***/
.slider, .homeslider {
	width:  100% !important;
	height: inherit;
}
div.orbit, div.orbit-wrapper {
	width: 90%;
}
.orbit-bullets {
	position: absolute;
	bottom: 0px;
	left: 60px;
}
.homeslider .timer {
	display: none;
}
.slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
}

/*** col1-responsive ***/
.homeslider.col1-responsive {
	margin-bottom: 20px;
	width: 90% !important;
	height: 300px;
	margin: 0;
	overflow: hidden;
}
.col1-responsive .slider, .col1-responsive .orbit {
	width: 100%;
	height: 300px !important;
	overflow: hidden !important;
	margin-bottom: 20px;
}
div.orbit, div.orbit-wrapper {
	width: 100%;
}
.col1-responsive .slider a {
	left: 0;
	width: 100%;
	height: 300px !important;
}
.col1-responsive .slider a > img {
	min-width: 620px;
	height: 300px;
}
.col1-responsive .slider .view-left img, .col1-responsive .slider .full-left img {
	margin-left: 0;
}
.col1-responsive .slider .view-center img, .col1-responsive .slider .full-center img {
	position: absolute;
	margin-left: -155px;
}
.col1-responsive .slider .view-right img, .col1-responsive .slider .full-right img {
	position: absolute;
	right: 0;
}
.col1-responsive .orbit-bullets {
	top: 270px;
}
.col1-responsive .slide-overlay {
	width: 100%;
}
.col1-responsive .slide-overlay.left-align img, .col1-responsive .slide-overlay.overlay-left img {
	width: 300px;
	min-width: 300px;
	height: 300px;
	text-align: left;
	margin-left: 0;
}
.col1-responsive .slide-overlay.center-align img, .col1-responsive .slide-overlay.overlay-center img {
	width: 300px;
	min-width: 300px;
	height: 300px;
	margin-left: 0px;
}
.col1-responsive .slide-overlay.right-align img, .col1-responsive .slide-overlay.overlay-right img {
	width: 300px;
	min-width: 300px;
	height: 300px;
	position: absolute;
	right: 0;
}

@media handheld, only screen and (min-width: 481px){
	.homeslider.col1-responsive {
		width: 80% !important;
	}
}
@media handheld, only screen and (min-width: 580px) {
	.col1-responsive .slider .view-center img, .col1-responsive .slider .full-center img {
		margin-left: -72px;
	}
	.col1-responsive .slide-overlay.center-align img, .col1-responsive .slide-overlay.overlay-center img {
		margin-left: 82px;
	}
}
@media handheld, only screen and (min-width: 660px) {
	.col1-responsive .slider .view-center img, .col1-responsive .slider .full-center img {
		margin-left: -31px;
	}
	.col1-responsive .slide-overlay.center-align img, .col1-responsive .slide-overlay.overlay-center img {
		margin-left: 123px;
	}
}
@media handheld, only screen and (min-width: 680px){
	/*** auto settings ***/
	div.orbit, div.orbit-wrapper {
		width: 620px;
		height: 300px !important;
	}
	.orbit-bullets {
		bottom: 15px;
	}
	.slide-overlay {
		position: absolute;
		top: 0;
		left: 0;
	}

	/*** col1 ***/
	.homeslider.col1 {
		float: left;
		margin-right: 320px;
		width:  300px !important;
		height: 300px;
		overflow: hidden;
	}
	.col1 .slider {
		float: left;
		margin-right: 20px;
		width:  620px !important;
		height: 300px;
	}
	.col1 .slider a {
		width: 100%;
	}
	.col1 .slider img {
		width: 620px;
	}
	.col1 .slider .view-left img, .col1 .slider .full-left img {
		margin-left: 0;
	}
	.col1 .slider .view-center img, .col1 .slider .full-center img {
		margin-left: -155px;
	}
	.col1 .slider .view-right img, .col1 .slider .full-right img {
		margin-left: -320px;
	}
	.col1  div.orbit, .col1 div.orbit-wrapper {
		width: 300px;
		overflow: hidden;
	}
	.col1 .orbit-bullets {
		bottom: 15px;
	}
	.col1 .slide-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 300px;
		min-width: 300px;
	}
	.col1 .slide-overlay.left-align img, .col1 .slide-overlay.overlay-left img {
		margin-left: 0;
	}
	.col1 .slide-overlay.center-align img, .col1 .slide-overlay.overlay-center img {
		margin-left: 0px;
	}
	.col1 .slide-overlay.right-align img, .col1 .slide-overlay.overlay-right img {
		margin-left: 0px;
	}

	/*** col2 ***/
	.col2 .slide-overlay.left-align, .col2 .slide-overlay.overlay-left {
		margin-left: 0;
	}
	.col2 .slide-overlay.center-align, .col2 .slide-overlay.overlay-center {
		margin-left: 155px;
	}
	.col2 .slide-overlay.right-align, .col2 .slide-overlay.overlay-right {
		margin-left: 320px;
	}
}
@media handheld, only screen and (min-width: 1000px){
	.slider, .homeslider.container {
		width:  620px !important;
		height: 300px;
		margin-top: 4px;
		margin-bottom: 10px;
	}
	div.orbit, div.orbit-wrapper {
		width: 620px !important;
		height: 300px;
	}
}