A Pen by InSuperposition.

index.html

 <div class="container">
   <span class="responsive-rectangle responsive-rectangle--quarter">
    <a href="www.youtube.com"class="responsive-rectangle__content">
       <span class="responsive-rectangle__icon-font zocial-youtube fittext"></span>
     </a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--quarter">
    <a href="www.youtube.com"class="responsive-rectangle__content">
      <span class="responsive-rectangle__icon-font zocial-facebook fittext"></span>
    </a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--quarter">
    <a href="www.youtube.com"class="responsive-rectangle__content">
      
    </a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--quarter">
    <a href="www.youtube.com"class="responsive-rectangle__content"></a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--whole">
    <a href="www.youtube.com"class="responsive-rectangle__content">
      <span class="responsive-rectangle__icon-font zocial-youtube"></span>
    </a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--third">
      <iframe class="responsive-rectangle__content" src="//player.vimeo.com/video/82042772" width="100%" height="101%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  </span>
  <span class="responsive-rectangle responsive-rectangle--third">
    <a href="www.youtube.com"class="responsive-rectangle__content"></a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--third">
    <a href="www.youtube.com"class="responsive-rectangle__content"></a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--quarter">
    <a href="www.youtube.com"class="responsive-rectangle__content"></a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--half">
    <a href="www.youtube.com"class="responsive-rectangle__content"></a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--quarter">
    <a href="www.youtube.com"class="responsive-rectangle__content"></a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--half">
    <a href="www.youtube.com"class="responsive-rectangle__content"></a>
  </span>
  <span class="responsive-rectangle responsive-rectangle--half">
      <iframe class="responsive-rectangle__content" src="//player.vimeo.com/video/82042772" width="100%" height="101%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </span> 
 </div>

Responsive-recatngles.markdown

Responsive recatngles

A Pen by InSuperposition on CodePen.

License.

Responsive-rectangles-(RR).markdown

Responsive rectangles (RR)

Maintains the ratio of a rectangle while adjusting to screen width Behaviors:

• Aspect ratio can be modified by changing padding-bottom's value in each of the RR "grid" modifiers (whole, half, third, etc.)

• Responsive text and icon-fonts are implemented JS lib (fittext, flowtype, etc.).

Caveats:

• To maintain heights of boxes, padding-bottom must match on all "grid" modifiers
• Modifying margin of RR will require adjustment of widths of the "grid" modifiers.
• I intend to create a sass mix-in eventually to address some of these issues.
• If JS is turned off, no responsive text. Solution: Serve site with fixed with, confirm font-sizes are correct value

Sources:

• http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
• http://blog.brianjohnsondesign.com/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

A Pen by InSuperposition on CodePen.

License.

script.js

//$(".fittext").fitText();

style.css

@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

*, *:before, *:after{
box-sizing: border-box; margin: 0; padding: 0;}

body{
  text-align: center;
}
.container{
  display: inline-block;
  background-color: purple;
  width:95%;/* */
  margin:0;
  padding-top: 1%;

  /*set size contraints of rectangle*/
  min-width: 320px;
  max-width: 1140px;
}

.responsive-rectangle{
  display: inline-block;
  text-align: left;
  position : relative;
  background-color: pink;
  margin: 1%;
}

.responsive-rectangle--whole{
  width: 95.75%;
  padding-bottom: 24%;
}

.responsive-rectangle--half{
  width: 46.5%;
  padding-bottom: 24%;
}

.responsive-rectangle--third{
  width: 30.2%;
  padding-bottom: 24%;
}

.responsive-rectangle--quarter{
  width: 22.05%;
  padding-bottom: 24%;
}

.responsive-rectangle--fifth{
  /*width: 22.05%;*/
  padding-bottom: 24%;
}

.responsive-rectangle--sixth{
  /*width: 22.05%;*/
  padding-bottom: 24%;
}



.responsive-rectangle__content{
  background-color: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

style.scss

@import "compass";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

*, *:before, *:after{
box-sizing: border-box; margin: 0; padding: 0;}

body{
  text-align: center;
}
.container{
  display: inline-block;
  background-color: purple;
  width:95%;/* */
  margin:0;
  padding-top: 1%;

  /*set size contraints of rectangle*/
  min-width: 320px;
  max-width: 1140px;
}

/*Block*/
.responsive-rectangle{
  display: inline-block;
  text-align: left;
  position : relative;
  background-color: pink;
  margin: 1%;
}

/*Elements*/
.responsive-rectangle__content{
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  /*overflow: hidden;*/
  text-decoration: none;
  background-color: lightcoral;
  color: white;


}

/* Modifiers */

/*Grid modifiers */
.responsive-rectangle--whole{
  width: 95.75%;
  padding-bottom: 24%;
}

.responsive-rectangle--half{
  width: 46.5%;
  padding-bottom: 24%;
}

.responsive-rectangle--third{
  width: 30.2%;
  padding-bottom: 24%;
}

.responsive-rectangle--quarter{
  width: 22.05%;
  padding-bottom: 24%;
}

.responsive-rectangle--fifth{
  /*width: 22.05%;*/
  padding-bottom: 24%;
}

.responsive-rectangle--sixth{
  /*width: 15.01%;*/
  padding-bottom: 24%;
}

.responsive-rectangle__icon-font{
 display:inline-block;
 text-align: center;
 position: absolute;
 top: 0; left: 0; right: 0; bottom:0;
 height: 100%;
}

.responsive-rectangle__icon-font:before{
 position: relative;
 font-size: 900%;
}

[class*="youtube"]{
 background-color: #c32f37;
}

[class*="facebook"]{
  background-color: #3a5796;
}

[class*="facebook"]:before{
  right: 10%;
}