BootKit home · Manual home

WEATHER

A combination of the best weather icon SVG set and specific layouts make for great widgets.


Weather Icons

This SVG icon set contains 123 beautifully crafted weather themed icons.
Plugin page.

Examples

-2°C

HELSINKI

57°F

BOSTON

33°C

NEW DEHLI

18°C

LONDON

Feels like: 16°
Humidity: 62%

25°

BERLIN

Feels like: 27°
Humidity: 41%
<div class="row">
    <div class="col-sm-4">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-bg-success bk-fg-white text-center bk-pd-t-30 bk-pd-b-30">
                <h1 class="bk-mg-off-t"> -2°C</h1>
                <i class="wi wi-day-lightning fa-5x bk-pd-t-20 bk-pd-b-20"></i>
                <h3 class="bk-mg-off">HELSINKI</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-bg-white bk-fg-primary text-center bk-pd-t-30 bk-pd-b-30">
                <h1 class="bk-mg-off-t"> 57°F</h1>
                <i class="wi wi-day-lightning fa-5x bk-pd-t-20 bk-pd-b-20"></i>
                <h3 class="bk-mg-off">BOSTON</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-bg-warning bk-fg-danger text-center bk-pd-t-30 bk-pd-b-30">
                <h1 class="bk-mg-off-t"> 33°C</h1>
                <i class="wi wi-day-lightning fa-5x bk-pd-t-20 bk-pd-b-20"></i>
                <h3 class="bk-mg-off">NEW DEHLI</h3>
            </div>
        </div>
    </div>
</div>

<div class="row">

    <div class="col-sm-6">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-bg-danger bk-fg-white bk-pd-off-b bk-pd-t-15">
                <div class="row">
                    <div class="col-xs-4 bk-vcenter">
                        <h2 class="bk-mg-off">18°C</h2>
                    </div>
                    <div class="col-xs-8 bk-vcenter text-right">
                        <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> LONDON</h4>
                    </div>
                </div>
                <div class="text-center bk-pd-b-20 bk-pd-t-20">
                    <i class="wi wi-rain-wind fa-5x"></i>
                    <i class="fa fa-long-arrow-right fa-2x bk-pd-l-10 bk-pd-r-10"></i>
                    <i class="wi wi-day-cloudy-gusts fa-5x"></i>
                </div>
                <div class="row bk-mg-t-15 bk-mg-b-10">
                    <div class="col-xs-6">
                        Feels like: 16°
                    </div>
                    <div class="col-xs-6 text-right">
                        Humidity: 62%
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="panel bk-widget bk-bd-off">
            <div class="panel-body bk-bg-info bk-fg-white bk-pd-off-b bk-pd-t-15">
                <div class="row">
                    <div class="col-xs-4 bk-vcenter">
                        <h2 class="bk-mg-off">25°</h2>
                    </div>
                    <div class="col-xs-8 bk-vcenter text-right">
                        <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> BERLIN</h4>
                    </div>
                </div>
                <div class="text-center bk-pd-b-20 bk-pd-t-20">
                    <i class="wi wi-cloudy-windy fa-5x"></i>
                    <i class="fa fa-long-arrow-right fa-2x bk-pd-l-10 bk-pd-r-10"></i>
                    <i class="wi wi-day-sunny fa-5x"></i>
                </div>
                <div class="row bk-mg-t-15 bk-mg-b-10">
                    <div class="col-xs-6">
                        Feels like: 27°
                    </div>
                    <div class="col-xs-6 text-right">
                        Humidity: 41%
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Skycons

Is a set of 10 canvas-based icons that are in continuous motion. Only depends on JavaScript, no other libraries required.
Plugin page.

Example

HTML

<canvas class="clear-day" width="64" height="64">
</canvas>

<canvas class="clear-night" width="64" height="64">
</canvas>

<canvas class="partly-cloudy-day" width="64" height="64">
</canvas>

<canvas class="partly-cloudy-night" width="64" height="64">
</canvas>

<canvas class="cloudy" width="64" height="64">
</canvas>

<canvas class="rain" width="64" height="64">
</canvas>

<canvas class="sleet" width="64" height="64">
</canvas>

<canvas class="snow" width="64" height="64">
</canvas>

<canvas class="wind" width="64" height="64">
</canvas>

<canvas class="fog" width="64" height="64">
</canvas>

JavaScript

// skycons
//http://stackoverflow.com/questions/24572100/skycons-cant-display-the-same-icon-twice
var skycons = new Skycons({"color": "#fff"}),
    list  = [
        "clear-day", "clear-night", "partly-cloudy-day",
        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
        "fog"
    ],
    i;

for(i = list.length; i--; ) {
    var weatherType = list[i],
        elements = document.getElementsByClassName( weatherType );
    for (e = elements.length; e--;){
        skycons.set( elements[e], weatherType );
    }
}

skycons.play();

Integrated weather widget with geolocation

The jQuery plugin simpleweatherjs takes care of grabbing the location from Yahoo!
Plugin page.

This widget has some custom CSS that can easily be changed according to project-specific needs. This example has a default layout which works on all devices and uses HTML5 geolocation to grab local weather data.

Weather widget

HTML

<div class="panel bk-widget bk-bd-off">
    <div class="panel-body bk-weather bk-weather-plugin bk-fg-white">
        <h4 class="bk-mg-off bk-opacity-8 bk-300">Weather widget</h4>
        <div id="weather"></div>
        <button class="js-geolocation btn btn-primary" style="display: none;">Use Your Location</button>
    </div>
</div>

jQuery

The loadWeather function is most important below, the rest can be copy-pasted into any project. This function can be changed so that the layout of your weather widget changes. Make sure to also change the specific CSS or LESS code which handles absolute positioning.

// Docs at http://simpleweatherjs.com

/* Does your browser support geolocation? */
if ("geolocation" in navigator) {
    $('.js-geolocation').show();
} else {
    $('.js-geolocation').hide();
}

/* Where in the world are you? */
$('.js-geolocation').on('click', function() {
    navigator.geolocation.getCurrentPosition(function(position) {
        loadWeather(position.coords.latitude+','+position.coords.longitude); //load weather using your lat/lng coordinates
    });
});

/*
 * Test Locations
 * Austin lat/long: 30.2676,-97.74298
 * Austin WOEID: 2357536
 */
$(document).ready(function() {
    loadWeather('Seattle',''); //@params location, woeid
});

function loadWeather(location, woeid) {
    $.simpleWeather({
        location: location,
        woeid: woeid,
        unit: 'f',
        success: function(weather) {
            html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2><span class="bk-wth-tmp-alt bk-opacity-6"> or '+weather.alt.temp+'&deg;C</span>';
            html += '<span class="bk-wth-region">'+weather.city+', '+ weather.region;
            html += '<br><span class="bk-wth-cur pull-right">'+weather.currently+'</span></span>';

            $("#weather").html(html);
        },
        error: function(error) {
            $("#weather").html('<p>'+error+'</p>');
        }
    });
}