Generated by SassMeister.com.

SassMeister-input-HTML.haml

- #  Video Page  
.flexbox
  %nav#mainNav
    %h1 Navigation/Ticker  
    
  %main
    %article
      %section.groupedInfo  
        %figure.video 
          %h1 Video & Video Description  
          // %figcaption
          //   Video Desc 
            
        %aside  
          %section#basicInfo 
            %h1 Brand Featured   
            -#(Downloads)
        
  
    
  %footer
    %h1 Footer 
         
      

SassMeister-input.sass

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Singularity Extras (v1.0.0.alpha.3)
// Toolkit (v2.0.1)
// ----

//@import "compass"
@import "compass/reset"
@import "toolkit"
@import "toolkit/kickstart"
@import "singularitygs"
@import "singularity-extras"
@import "breakpoint" 

// Breakpoint 
$breakpoint-to-ems: true !global 
$bk: 700px
$desktop: 900px 
body 
  font-family: sans-serif

%base 
  background: white 
  border: 1px solid gainsboro 
  padding: 1em 
  color: lighten(gray, 20%)
  
  .flexbox &
    display: flex
    align-items: center 
    justify-content: center 
  
  .noflexbox & 
    position: relative 
    
    h1 
      text-align: center
      // center anything in CSS the Simon way
      // must set explicit height 
      width: 100%
      height: 5px
      
      
      // usual position absolute styling 
      position: absolute 
      top: 0 
      // left: 0  
      // right: 0 
      bottom: 0
      margin: auto 
      
#profile, #basicInfo, #suppInfo, .video , #mainNav, footer,  
  @extend %base
  
#mainNav
  min-height: 44px
  height: 4.4vh
  //min-height: 5vh 
  //height: 8vh 
  
  
.video  
  min-height: 500px
  min-height: 50vh 
  max-height: 500px
  flex-direction: column 
  // figcaption
  //   clear: both 
  //   border: 1px solid 
  //   width: 100% 
  //   text-align: center 
  //   margin-top: auto 
    
  
  
main
  +breakpoint($desktop)
    max-width: 1200px  
    margin: 1em  auto
     
    
  .flexbox 
    display: flex
    flex-flow: column wrap 
    align-items: stretch
  
  .noflexbox & 
    +add-grid(4)
    +add-grid(12 at $bk) 
    +add-gutter(0)
    +add-gutter-style('opposite' at $bk)
    +sgs-change('debug', true) 
    +background-grid()
      
#basicInfo 
  min-height: 400px 
  min-height: 80vh
  //height: 100%
  align-self: stretch 
  flex: 1
  
   
  
#suppInfo 
  min-height: 400px
  min-height: 30vh
  display: none 
  
  +breakpoint($bk)
    .flexbox & 
      flex-grow: 1
      display: flex 
      clear: both 
      
    .noflexbox &  
      display: block
      
  
  
    
#photos, #relatedScholars
  min-height: 600px
  min-height: 60vh
  margin-bottom: 1em 
  
  +breakpoint($bk)
    .flexbox &
      flex-grow: 2
      clear: both 
      
  .noflexbox & 
    clear: both 

footer 
  height: 200px
  height: 20vh
  
  .noflexbox & 
    clear: both 
    +grid-span(4)
    +breakpoint($bk) 
      +grid-span(12) 

.groupedInfo
  margin-bottom: 1em
  +breakpoint($bk)
    .flexbox & 
      display: flex 
      flex-flow: row wrap 
      flex: 1 1 100%
      align-items: stretch
    
      aside  
        flex: 1 1 auto 
        align-items: stretch 
        
      > figure
        flex: 2 0 500px 
        
    .noflexbox &
      +grid-span(12)
      clear: both 
      
      +layout(snap(1 2, 1/3), 0)
        +background-grid() 
        aside 
          +grid-span(1, 1) 
          clear: left 
          
          
        > figure 
          +grid-span(1, 2)
          clear: right 
        
.supplementaryContent 
  @extend .groupedInfo
  
  
    
  
        
    
    
    
    
    
    
    
    
    
  
    
    
  
  

SassMeister-output.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

body {
  font-family: sans-serif;
}

#profile, #basicInfo, #suppInfo, .video, #mainNav, footer {
  background: white;
  border: 1px solid gainsboro;
  padding: 1em;
  color: #b3b3b3;
}
.flexbox #profile, .flexbox #basicInfo, .flexbox #suppInfo, .flexbox .video, .flexbox #mainNav, .flexbox footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.noflexbox #profile, .noflexbox #basicInfo, .noflexbox #suppInfo, .noflexbox .video, .noflexbox #mainNav, .noflexbox footer {
  position: relative;
}
.noflexbox #profile h1, .noflexbox #basicInfo h1, .noflexbox #suppInfo h1, .noflexbox .video h1, .noflexbox #mainNav h1, .noflexbox footer h1 {
  text-align: center;
  width: 100%;
  height: 5px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

#mainNav {
  min-height: 44px;
  height: 4.4vh;
}

.video {
  min-height: 500px;
  min-height: 50vh;
  max-height: 500px;
  flex-direction: column;
}

@media (min-width: 56.25em) {
  main {
    max-width: 1200px;
    margin: 1em auto;
  }
}
main .flexbox {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
}
.noflexbox main {
  background-image: linear-gradient(to right, chocolate 0%, chocolate 25%, #dd8e56 25%, #dd8e56 25%, chocolate 25%, chocolate 50%, #dd8e56 50%, #dd8e56 50%, chocolate 50%, chocolate 75%, #dd8e56 75%, #dd8e56 75%, chocolate 75%, chocolate);
}
@media (min-width: 43.75em) {
  .noflexbox main {
    background-image: linear-gradient(to right, chocolate 0%, chocolate 8.33333%, #dd8e56 8.33333%, #dd8e56 8.33333%, chocolate 8.33333%, chocolate 16.66667%, #dd8e56 16.66667%, #dd8e56 16.66667%, chocolate 16.66667%, chocolate 25.0%, #dd8e56 25.0%, #dd8e56 25.0%, chocolate 25.0%, chocolate 33.33333%, #dd8e56 33.33333%, #dd8e56 33.33333%, chocolate 33.33333%, chocolate 41.66667%, #dd8e56 41.66667%, #dd8e56 41.66667%, chocolate 41.66667%, chocolate 50.0%, #dd8e56 50.0%, #dd8e56 50.0%, chocolate 50.0%, chocolate 58.33333%, #dd8e56 58.33333%, #dd8e56 58.33333%, chocolate 58.33333%, chocolate 66.66667%, #dd8e56 66.66667%, #dd8e56 66.66667%, chocolate 66.66667%, chocolate 75.0%, #dd8e56 75.0%, #dd8e56 75.0%, chocolate 75.0%, chocolate 83.33333%, #dd8e56 83.33333%, #dd8e56 83.33333%, chocolate 83.33333%, chocolate 91.66667%, #dd8e56 91.66667%, #dd8e56 91.66667%, chocolate 91.66667%, chocolate);
  }
}

#basicInfo {
  min-height: 400px;
  min-height: 80vh;
  align-self: stretch;
  flex: 1;
}

#suppInfo {
  min-height: 400px;
  min-height: 30vh;
  display: none;
}
@media (min-width: 43.75em) {
  .flexbox #suppInfo {
    flex-grow: 1;
    display: flex;
    clear: both;
  }
  .noflexbox #suppInfo {
    display: block;
  }
}

#photos, #relatedScholars {
  min-height: 600px;
  min-height: 60vh;
  margin-bottom: 1em;
}
@media (min-width: 43.75em) {
  .flexbox #photos, .flexbox #relatedScholars {
    flex-grow: 2;
    clear: both;
  }
}
.noflexbox #photos, .noflexbox #relatedScholars {
  clear: both;
}

footer {
  height: 200px;
  height: 20vh;
}
.noflexbox footer {
  clear: both;
  -sgs-span-settings: ("span": 4, "location": 1, "grid": 4, "gutter": 0, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 43.75em) {
  .noflexbox footer {
    -sgs-span-settings: ("span": 12, "location": 1, "grid": 12, "gutter": 0, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.groupedInfo, .supplementaryContent {
  margin-bottom: 1em;
}
@media (min-width: 43.75em) {
  .flexbox .groupedInfo, .flexbox .supplementaryContent {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 100%;
    align-items: stretch;
  }
  .flexbox .groupedInfo aside, .flexbox .supplementaryContent aside {
    flex: 1 1 auto;
    align-items: stretch;
  }
  .flexbox .groupedInfo > figure, .flexbox .supplementaryContent > figure {
    flex: 2 0 500px;
  }
  .noflexbox .groupedInfo, .noflexbox .supplementaryContent {
    -sgs-span-settings: ("span": 12, "location": 1, "grid": 12, "gutter": 0, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    clear: both;
    background-image: linear-gradient(to right, chocolate 0%, chocolate 30%, #dd8e56 30%, #dd8e56 30%, #b25919 30%, #b25919);
  }
}
@media (min-width: 43.75em) and (min-width: 43.75em) {
  .noflexbox .groupedInfo, .noflexbox .supplementaryContent {
    background-image: linear-gradient(to right, chocolate 0%, chocolate 30%, #dd8e56 30%, #dd8e56 30%, #b25919 30%, #b25919);
  }
}
@media (min-width: 43.75em) {
  .noflexbox .groupedInfo aside, .noflexbox .supplementaryContent aside {
    -sgs-span-settings: ("span": 1, "location": 1, "grid": 1 2.33333, "gutter": 0, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
    width: 30%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    clear: left;
  }
  .noflexbox .groupedInfo > figure, .noflexbox .supplementaryContent > figure {
    -sgs-span-settings: ("span": 1, "location": 2, "grid": 1 2.33333, "gutter": 0, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
    width: 70%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    clear: right;
  }
}

SassMeister-rendered.html

<div class='flexbox'>
  <nav id='mainNav'>
    <h1>Navigation/Ticker</h1>
  </nav>
  <main>
    <article>
      <section class='groupedInfo'>
        <figure class='video'>
          <h1>Video & Video Description</h1>
          <!-- / %figcaption -->
          <!-- /   Video Desc -->
        </figure>
        <aside>
          <section id='basicInfo'>
            <h1>Brand Featured</h1>
          </section>
        </aside>
      </section>
    </article>
  </main>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>