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

1.0.0

Demo
loading example… 
<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(WBC)
2.0.0

Demo
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<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(WBC)
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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<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(WBC)

Responsive-Embeds

1.0.0

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
loading example… 
<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(WBC)
2.0.0

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
loading example…

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<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(WBC)
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! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203) 
<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(WBC)