Responsive layouts have prompted us to reassess how we add media to our screens. These are some basic classes for adding and styling responsive media. We will add to this as we establish more consistent patterns for our templates etc.

Images

2.0.1

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<img class="img-rounded" src="http://YOUR-IMG-URL.com.au" alt="YOUR PLACEHOLDER TEXT">

CSS

Modifier classes:
  • img-responsive
  • img-rounded
  • img-circle

LESS

The main mixin is called: _images(BT)

Responsive Embeds

2.0.1

Video

Allows browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="responsive-embeds responsive-embeds-16by9">
	<iframe class="responsive-embeds-item" src="http://LINK-TO-YOUTUBE"></iframe>
</div>

CSS

Modifier classes:
  • responsive-embeds-16by9
  • responsive-embeds-4by3
  • responsive-embeds-185by1
  • responsive-embeds-235by1

LESS

The main mixin is called: _responsive-embeds(BT)