Complex conditions

Based on multiple window dimensions

Clock will be active as long as window width falls between 450 and 750 pixels.

<div data-module="ui/Clock"
     data-conditions="window:{min-width:450,max-width:750}"> ... </div>

Based on Media Query

Clock will be active as long as the media query is matched.

<div data-module="ui/Clock"
     data-conditions="media:{(min-width:30em) and (max-width:70em)} or not media:{supported}"> ... </div>

Based on multiple conditions

Map will be active as long as there is a network connection available, the media query is matched and the element has been scrolled into view. If there is no media query support, the map may also be loaded.

<div class="component">
    <a href="http://maps.google.com/?ll=51.741380,3.822169&z=11"
       data-module="ui/Map"
       data-conditions="(connection:{any} and media:{(min-width:40em)} and element:{was visible}) or not media:{supported}"> ... </a>
</div>
Coast of Holland at Google Maps

Conditioner.js