Responsive figure and figcaption elements responsive-figure-figcaption

responsive-figure-figcaption-output.css

/* Responsive figure and figcaption elements

How to display a figcaption element,
without setting a with = to image with

Source and exemple: <http://stackoverflow.com/questions/6534473/how-can-i-make-the-width-of-my-figcaption-match-the-width-of-the-img-inside>

.basic        - display the figcaption under the image
.side-by-side - display the figcaption on the right

Markup:
<figure class="$modifierClass">
    <img width="200" height="150" alt="" />
    <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>


Styleguide medias.figure
*/
figure.basic {
  display: table;
  width: 1px;
  /* This can be any width, so long as it's narrower than any image */
}
figure.basic img, figure.basic figcaption {
  display: table-row;
}

figure.side-by-side {
  display: table;
}
figure.side-by-side img, figure.side-by-side figcaption {
  display: table-cell;
  vertical-align: bottom;
}
figure.side-by-side figcaption {
  padding-left: .5em;
}

main {
  width: 960px;
  margin: 0 auto;
  display: block;
}

responsive-figure-figcaption-rendered.html

<main>
<figure class="side-by-side">
    <img src="http://placekitten.com/200/150" width="200" height="150" alt="An image of a bunny rabbit." />
    <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>
<hr>
<figure class="basic">
    <img src="http://placekitten.com/200/150" width="200" height="150" alt="An image of a bunny rabbit." />
    <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>
</main>

responsive-figure-figcaption.html

<main>
<figure class="side-by-side">
    <img src="http://placekitten.com/200/150" width="200" height="150" alt="An image of a bunny rabbit." />
    <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>
<hr>
<figure class="basic">
    <img src="http://placekitten.com/200/150" width="200" height="150" alt="An image of a bunny rabbit." />
    <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>
</main>

responsive-figure-figcaption.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

/* Responsive figure and figcaption elements

How to display a figcaption element,
without setting a with = to image with

Source and exemple: <http://stackoverflow.com/questions/6534473/how-can-i-make-the-width-of-my-figcaption-match-the-width-of-the-img-inside>

.basic        - display the figcaption under the image
.side-by-side - display the figcaption on the right

Markup:
<figure class="$modifierClass">
    <img width="200" height="150" alt="" />
    <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>


Styleguide medias.figure
*/
figure.basic {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
  
  img, figcaption {
    display: table-row;
  }
}

figure.side-by-side {
    display: table;

  img, figcaption {
    display: table-cell;
    vertical-align: bottom;
  }
  figcaption {
    padding-left:.5em;
  }
}

//-----------------------------
// DEMO STYLING
//-----------------------------

main{
  width:960px;
  margin:0 auto;
  display:block;
}