Miscellaneous

Responsive Video

YouTube and Vimeo videos can be wrapped with <div class="flex-video"> .. </div>.

<div class="flex-video">
	<iframe width="560" height="315" src="//www.youtube.com/embed/........." frameborder="0" allowfullscreen></iframe>
</div>

Scroll To Top

Adding an element with the ID of scrollToTop makes the element clickable, once clicked the page is scrolled to the top.

The default is to make the element visible once the window is scrolled past 600 pixels, this can by changed by adding data-showat attribute to the element with the number of pixels of scroll after which to show the element.

<div id="scrollToTop" class="hide" data-showat="800">Top</div>

Equal Height Columns

Depending on browser support e.g. IE10+ adding span-*-equal-height class to a row, where * is t, s, m or l.

Cell 1
test
<div class="row span-s-equal-height">
	<div class="span-s6">Cell 1</div>
	<div class="span-s6 no-gutter">
		<img src="small.jpg" alt="test" />
	</div>
</div>
Top