A Pen by Sean Dempsey.

Dynamic-Height-and-Width,-with-Susy!.markdown

Dynamic Height and Width, with Susy!

Inspired by this pen here: http://codepen.io/digsite_/pen/iCJLo Wanted to share a mixin I've been using for a while. Combined with Susy for funsies.

A Pen by Sean Dempsey on CodePen.

License.

index.html

<h1>Susy and SASS dynamic sizing.</h1>
<p>Based on the demo by <a href="http://codepen.io/digsite_/pen/iCJLo" target="_blank">Jeremy Paris</a>.  Nice work Jeremy! We modified it a bit to work with SUSY.  this is an extremely powerful tool to have in our toolbox.  Resize the browser.  The boxes will maintain their height and width.</p>
<div class="square">
  <section>
    <article class="content">
      <h2>1:1</h2>
    </article>
  </section>
  <section>
    <article class="content">
      <h2>1:1</h2>
    </article>
  </section>
  <section>
    <article class="content">
      <h2>1:1</h2>
    </article>
  </section>
  <section>
    <article class="content">
      <h2>1:1</h2>
    </article>
  </section>
</div>

<div class="rect">
  <section>
    <article>
      <h2>2:1</h2>
    </article>
  </section>
    <section>
    <article>
      <h2>2:1</h2>
    </article>
  </section>
</div>
<div class="one-two">
  <section>
    <article>
      <h2>1:2</h2>
    </article>
  </section>
    <section>
    <article>
      <h2>1:2</h2>
    </article>
  </section>
  <section>
    <article>
      <h2>1:2</h2>
    </article>
  </section>  
</div>
<div class="four-three">
  <section>
  <article class="content">
    <h2>4:3</h2>
  </article>
</section>
  <section>
    <article class="content">
      <h2>4:3</h2>
    </article>
  </section>
  <section>
  <article class="content">
    <h2>4:3</h2>
  </article>
</section>
  <section>
    <article class="content">
      <h2>4:3</h2>
    </article>
  </section>  
</div>
<div class="sixteen-nine">
  <section>
  <article class="content">
    <h2>16:9</h2>
  </article>
</section>
  <section>
  <article class="content">
    <h2>16:9</h2>
  </article>
</section>
  <section>
  <article class="content">
    <h2>16:9</h2>
  </article>
</section>
</div>
<div class="full">
  <section>
  <article class="content">
    <h2>2.39:1</h2>
  </article>
</section>
</div>

script.js

/*
  Inspired by this pen here: http://codepen.io/digsite_/pen/iCJLo
  Wanted to share a mixin I've been using for a while.  Combined with Susy for funsies.
*/

style.scss

@import "compass/css3";
@import 'susyone';
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

@include border-box-sizing;
@include establish-baseline;

@function pxtoem($px, $base: $base-font-size) {
  @return ($px / $base) + 0em;
}

@mixin clearfix{
  *zoom: 1;

  &:before, &:after{
    content: " ";
    display: table;
  }

  &:after{
    clear: both;
  };
}

$base-font-size:16px;
$gutter-width: 1em;
$container-width: pxtoem(960px);

@mixin maintain-aspect-ratio($width, $height) {
  position: relative;
  
  &:before{
    display: block;
    content: " ";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }

  > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

$blue: #1f7482;
$cream: #faf0e0;
$grey:#969696;

$colors: (
  body-bg: $grey,
  body-copy: $cream,
  block-bg: $blue,
  block-border: darken($blue, 20%)
);

body {
  background-color: map-get($colors, body-bg);
  color: map-get($colors, body-copy);
  font-family: 'Source Code Pro', sans-serif;
  width:100%;
  @include container;
}

h1 {
  font-size: pxtoem(40px);
  line-height:42px;
}

h2 {
  font-size: pxtoem(28px);
}

.container {
  @include container;
}

section {
  background-color: map-get($colors, block-bg);
  border: 2px solid map-get($colors, block-border);
  margin-bottom:$gutter-width;
  @include transition(width 0.75s ease);
}

div {
  @include clearfix;
  
  > * {
    text-align:center;
  }

  &.square {
    >* {
        @include maintain-aspect-ratio(1,1);
        @include span-columns(3,12);
        @include nth-omega(4);
      }
    }
  &.rect {
      > * {
        @include maintain-aspect-ratio(2,1);
        @include span-columns(6,12);
        @include nth-omega(2);      
      }
    }
    &.one-two {
      > * {
        @include maintain-aspect-ratio(1,2);
        @include span-columns(4,12);
        @include nth-omega(3);      
      }
    }
    &.four-three {
      > * {
        @include maintain-aspect-ratio(4,3);
        @include span-columns(3,12);
        @include nth-omega(4);      
      }
    }  
    &.sixteen-nine {
    > * {
      @include maintain-aspect-ratio(16,9);
      @include span-columns(4,12);
      @include nth-omega(3);  
    }
  }  
    &.full {
    > * {
      @include maintain-aspect-ratio(2.39,1); 
    }
  }    
}

p {
  background-color: map-get($colors, block-bg);
  border: 2px solid map-get($colors, block-border);
  padding:5px;
  margin-bottom: $gutter-width;
}