Flat UI forecast widget using css3 transitions, HTML5 Data attribute, and some simple transitions!!
A Pen by Brady Sammons on CodePen.
Flat UI forecast widget using css3 transitions, HTML5 Data attribute, and some simple transitions!!
A Pen by Brady Sammons on CodePen.
<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 --> |
(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); |
@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; | |
} | |
} | |
} | |
} |