burnsjeremy · June 19, 2014 07:01 · Jun 19, 2014
diff --git a/SassMeister-input-HTML.haml b/SassMeister-input-HTML.haml
@@ -0,0 +1,24 @@
+- #  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 
+
+
diff --git a/SassMeister-input.sass b/SassMeister-input.sass
@@ -0,0 +1,197 @@
+// ----
+// 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/SassMeister-output.css b/SassMeister-output.css
@@ -0,0 +1,241 @@
+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;
+  }
+}
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
@@ -0,0 +1,24 @@
+<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>