A Pen by Brady Sammons.

Flat-UI-Forecast-Widget.markdown

Flat UI Forecast Widget

Flat UI forecast widget using css3 transitions, HTML5 Data attribute, and some simple transitions!!

A Pen by Brady Sammons on CodePen.

License.

index.html

<div id="weather-widget" class='lightning'>
			<header>
				<span data-day="Thursday">Thursday</span>
				<span data-date="1-14">1-2</span>
			</header>
			<section id="current-temp">
				<h1 class='temp degree'>47</h1>
				<aside id="details">
					<i class="icon-cloudy"></i>
					<div class="hi-lo">
						<span class='lo degree'>: 45</span> 
						<span class='hi degree'>: 52</span>
					</div><!-- //.hi-lo -->
				</aside><!-- //.details -->
			</section><!-- //.current-temp -->
			<section id="forecast">
				<ul>
					<li data-lo='40' data-hi='50' data-icon='rainy' data-color='rain-a' data-date='Monday 12-30'>
						<span class="day">Mo</span>
						<span class="icon icon-rainy"></span>
						<span class="temp degree">42</span>
					</li>
					<li data-lo='45' data-hi='52' data-icon='lightning' data-color='lightning-a' data-date='Tuesday 12-31'>
						<span class="day">Tu</span>
						<span class="icon icon-lightning"></span>
						<span class="temp degree">47</span>
					</li>
					<li data-lo='55' data-hi='63' data-icon='cloudy2' data-color='cloudy-b' data-date='Wdnesday 1-1'>
						<span class="day">We</span>
						<span class="icon icon-cloudy2"></span>
						<span class="temp degree">58</span>
					</li>
					<li class='current' data-lo='59' data-hi='68' data-icon='cloudy' data-color='cloudy-c' data-date='Thursday 1-2'>
						<span class="day">Th</span>
						<span class="icon icon-cloudy"></span>
						<span class="temp degree">67</span>
					</li>
					<li data-lo='62' data-hi='74' data-icon='sun' data-color='sun-b' data-date='Friday 1-3'>
						<span class="day">Fr</span>
						<span class="icon icon-sun"></span>
						<span class="temp degree">71</span>
					</li>
					<li data-lo='64' data-hi='75' data-icon='sun' data-color='sun-c' data-date='Saturday 1-4'>
						<span class="day">Sa</span>
						<span class="icon icon-sun"></span>
						<span class="degree temp">74</span>
					</li>
					<li data-lo='62' data-hi='72' data-icon='cloudy' data-color='cloudy-c' data-date='Sunday 1-5'>
						<span class="day">Su</span>
						<span class="icon icon-cloudy"></span>
						<span class="degree temp">70</span>
					</li>
				</ul>
			</section><!-- //.forecast -->
		</div><!-- //.weather-widget -->

script.js

(function($){
	//write our scripts here
  var fadespeed = 500;
	$("#forecast li").on("click" , function(){
    
    //set main variable
		var $this = $(this),
			main = $this.parents("#weather-widget");
      mainDate = main.find("header"),
			mainTemp = main.find("h1.temp"),
			mainHi = mainTemp.next().find("span.hi"),
			mainLo = mainTemp.next().find("span.lo"),
			details = mainTemp.next(),
			
      //get values and store them
			temp = $this.find(".temp").text(),
			lo = $this.data("lo"),
			hi = $this.data("hi"),
      date = $this.data("date");
			icon = $this.data("icon"),
			color = $(this).data("color");

		//click functions
		$this.addClass("current").siblings().removeClass("current");
    
      //set the values
      mainTemp.text(temp);
      mainDate.text(date);
      details.stop().fadeTo(fadespeed , 0 , function(){
        $(this).stop().fadeTo(fadespeed ,1)
        details.find("i").removeClass().addClass("icon-" + icon);
        mainHi.text(hi);
        mainLo.text(lo);
      });
      $("body").removeClass().addClass(color);
	  });
})(jQuery);

style.scss

@import "compass";
@import "compass/reset";
@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Lato:100,400);

*{
	@include box-sizing(border-box);
}
html,body{
	height: 100%;
	color: #fff;
	font:{
		size:100%;
		family: 'Lato', sans-serif;
		weight:normal;
	}
}
body{
	 @include transition(background-color .9s);
	 background-color: #87C1CD;
	 /* Colors */	
	/* ---------------------------------------- */ 
	&.rain-a{
		background-color: #4E62AD;
	}
	&.lightning-a{
		background-color: #AFB845;
	}
	&.cloudy-b{
		background-color: #43429F;
	}
	&.cloudy-c{
		background-color: #87C1CD;
	}
	&.sun-b{
		background-color: #CD781B;
	}
	&.sun-c{
		background-color:  adjust-hue(#CD781B, 10%);
	}
	&.sun{
		background-color: #EB7E18;
	}
}

.degree:after{
	content: '\00b0';
}

header,
section#current-temp{
	@include box-shadow(0 1px 0 rgba(255,255,255,.5));	
}
section#current-temp h1,
aside#details{
	display: inline-block;
}

div#weather-widget{
	position: absolute;
	top:0; right:0; bottom:0; left:0;
	margin: auto;
	width: 352px;
	height: 316px;
	border:1px solid rgba(255,255,255,.5);
}

header{
	text-align: center;
	padding: 15px 0;
}

section#current-temp{
	padding: 25px 15px;

	h1.temp{
		font:{
			weight: 300;
			size: 125px;
		}
		line-height: .65;
		letter-spacing: -.1em;
		padding-right: 10px;
		width: 185px;
	}

	aside#details{
		vertical-align: top;
		font-weight: normal;
		i{
			font-size: 70px;
			text-align: center;
			width: 100%;
			display: block;
			margin-bottom: 5px;
		}
		.hi-lo{
			text-align: center;
			width: 130px;
			span{
				display: inline-block;
				font-size: 14px;
				margin: 0 3px;
				&.hi:before{
					content: '\2191';
				}
				&.lo:before{
					content: '\2193';
				}
			}
		}
	}
}

section#forecast{
	ul{
		li{
			cursor: pointer;
			width: 50px;			
			display: block;
      float:left;
			margin-right: 0px;
			padding: 15px 0;
			font-weight: 100;
			font-size: 16px;
			@include box-shadow(1px 0 0 rgba(255,255,255,.5));
			@include transition(background-color .3s);
			span{
				display: block;
				text-align: center;
				margin-bottom: 15px;
				&.icon{
					font-weight: bold;
					font-size: 20px;
				}
			}
			&.current, &.current:hover{
				background-color: rgba(0,0,0,.2);
			}
			&:hover{
				background-color: rgba(255,255,255,.2);	
			}
			&:last-child{
				@include box-shadow(none);
				margin: 0;
			}
		}
	}
}