groundworkcss 0.4.4 → 2.0.0

data/app/assets/stylesheets/groundworkcss/ui/_tabs.scss

@@ -0,0 +1,192 @@
+// =============================================
+//                   Tabs
+//          Last Updated:2013-8-26
+// =============================================
+
+$tab-classes:         true !default;
+$tab-states:          "active" !default;
+$aria-selectors:      true !default;
+$tab-color:           lighten(gray, 32.5%) !default;
+$tab-text:            darken(gray, 15%) !default;
+$tab-border-color:    lighten(gray, 22.5%) !default;
+$tab-active:          lighten(gray, 27.5%) !default;
+$tab-active-text:     darken(gray, 12%) !default;
+$tabpanel-background: #ffffff !default;
+$tabpanel-text:       #2b2b2d !default;
+// shared defaults
+$border-thickness:    1px !default;
+$border-style:        solid !default;
+$border-color:        #dddddd !default;
+$default-radius:      4px !default;
+
+
+%tablist {
+  @extend %unstyled;
+}
+
+%tab {
+  @extend %inline-block;
+  margin-bottom: -1px;
+  padding: 0.25em 1em;
+  background: $tab-color;
+  border: $border-thickness $border-style $tab-border-color;
+  color: $tab-text;
+  @include font-stack();
+  font-weight: bold;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.5;
+  width: auto;
+  height: auto;
+  text-align: center;
+  @include rounded($default-radius $default-radius 0 0);
+  &:hover, &:focus {
+    @extend %tab-hover;
+    @include transition(background-color 0.25s ease-out);
+  }
+}
+
+%tab-hover {
+  background: $tab-active;
+  text-decoration: none;
+  color: $tab-active-text;
+}
+
+%tab-active {
+  background: $tabpanel-background;
+  text-decoration: none;
+  color: $tabpanel-text;
+  border-bottom-color: $tabpanel-background;
+  @include transition(none);
+}
+
+%tabpanel {
+  @extend %padded, %clear;
+  display: none;
+  background: $tabpanel-background;
+  border: $border-thickness $border-style $tab-border-color;
+  color: $tabpanel-text;
+  @include rounded(0 $default-radius $default-radius $default-radius);
+  &.active, &.on {
+    display: block;
+  }
+}
+
+@for $i from 1 through length($modifier-name) {
+  %tablist-#{nth($modifier-name, $i)} {
+
+  }
+  %tab-#{nth($modifier-name, $i)} {
+    background-color: #{nth($modifier-code, $i)};
+    color: #{nth($modifier-text, $i)};
+    border-color: darken(nth($modifier-code, $i), 5%);
+    &.active, &[aria-selected="true"], &[aria-pressed="true"], &:hover, &:focus {
+      background: darken(nth($modifier-code, $i), 5%);
+      border-color: darken(nth($modifier-code, $i), 10%);
+    }
+    &.disabled, &[disabled="disabled"] {
+      @include state(disabled,normal,desaturate(nth($modifier-code, $i),20%));
+    }
+  }
+
+  %tabpanel-#{nth($modifier-name, $i)} {
+
+  }
+}
+
+@if $tab-classes {
+  .no-js {
+    .tabs {
+      > div {
+        display: block;
+      }
+    }
+  }
+  .tabs {
+    &:not(.accordion) {
+      @extend %relative;
+      &.vertical {
+        > ul {
+          @extend %absolute, %absolute-top, %absolute-left, %absolute-bottom;
+          overflow: auto;
+        }
+      }
+    }
+    > ul {
+      @extend %tablist;
+      li {
+        @extend %tab;
+        @for $i from 1 through length($modifier-name) {
+          &.#{nth($modifier-name, $i)} {
+            @extend %tab-#{nth($modifier-name, $i)};
+          }
+        }
+        @for $i from 1 through length($tab-states) {
+          &.#{nth($tab-states, $i)} {
+            @extend %tab-#{nth($tab-states, $i)};
+          }
+        }
+      }
+    }
+    > div {
+      @extend %tabpanel;
+    }
+    &.vertical {
+      @include rounded($default-radius);
+      > ul {
+        background: $tab-border-color;
+        @include rounded($default-radius 0 0 $default-radius);
+        li {
+          @extend %block;
+          border-right: 0;
+          &:not(:first-child) {
+            @include rounded(0);
+          }
+          &:first-child {
+            @include rounded($default-radius 0 0 0);
+          }
+        }
+      }
+      > div {
+        clear: none;
+        @include rounded($default-radius);
+      }
+    }
+    &.accordion {
+      > ul {
+        li {
+          @extend %block;
+          @include rounded(0);
+          &:first-child {
+            @include rounded($default-radius $default-radius 0 0);
+          }
+          &:last-of-type {
+            @include rounded(0 0 $default-radius $default-radius);
+          }
+          &.active {
+            @extend %tab-hover;
+            border-bottom: $border-thickness $border-style $tab-border-color;
+          }
+        }
+        > div {
+          @include rounded(0);
+          &:last-child {
+            @include rounded(0 0 $default-radius $default-radius);
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $aria-selectors {
+  [role~="tablist"] {
+    @extend %tablist;
+  }
+  [role~="tab"] {
+    @extend %tab;
+  }
+  [role~="tabpanel"] {
+    @extend %tabpanel;
+  }
+}

data/app/views/groundworkdocs/animations.html.erb

@@ -0,0 +1,156 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Animations</h1>
+            <p class="quicksand">A collection of pure CSS3 animations, mostly from <a href="http://daneden.me/animate/" target="_blank">Animate.css</a> by <a href="http://twitter.com/_dte" target="_blank">Dan Eden</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 14 of 14</p>
+            <p><a href="placeholder_text.html" rel="prev" class="blue button">Back</a> <a href="home.html" rel="next" class="green button">Return Home</a></p>
+          </div>
+        </div>
+        <hr><br>
+      </div>
+    </div>
+    <h4 style="width:20em;margin-left:-10em;text-align:center;z-index:1;" class="fixed center">
+      <button id="animateTest" class="large asphalt bounceInLeft animated">I do awesome things.</button>
+    </h4><br><br><br><br>
+    <div class="container">
+      <div class="padded">
+        <hr><br>
+        <div class="row">
+          <div class="one half padded">
+            <h4>Attention seekers</h4>
+            <button data-test="flash" class="gap-bottom">flash</button>
+            <button data-test="bounce" class="gap-bottom">bounce</button>
+            <button data-test="shake" class="gap-bottom">shake</button>
+            <button data-test="tada" class="gap-bottom">tada</button>
+            <button data-test="swing" class="gap-bottom">swing</button>
+            <button data-test="wobble" class="gap-bottom">wobble</button>
+            <button data-test="pulse" class="gap-bottom">pulse</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Flippers</h4>
+            <button data-test="flip" class="gap-bottom">flip</button>
+            <button data-test="flipInX" class="gap-bottom">flipInX</button>
+            <button data-test="flipOutX" class="gap-bottom">flipOutX</button>
+            <button data-test="flipInY" class="gap-bottom">flipInY</button>
+            <button data-test="flipOutY" class="gap-bottom">flipOutY</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Fading entrances</h4>
+            <button data-test="fadeIn" class="gap-bottom">fadeIn</button>
+            <button data-test="fadeInUp" class="gap-bottom">fadeInUp</button>
+            <button data-test="fadeInDown" class="gap-bottom">fadeInDown</button>
+            <button data-test="fadeInLeft" class="gap-bottom">fadeInLeft</button>
+            <button data-test="fadeInRight" class="gap-bottom">fadeInRight</button>
+            <button data-test="fadeInUpBig" class="gap-bottom">fadeInUpBig</button>
+            <button data-test="fadeInDownBig" class="gap-bottom">fadeInDownBig</button>
+            <button data-test="fadeInLeftBig" class="gap-bottom">fadeInLeftBig</button>
+            <button data-test="fadeInRightBig" class="gap-bottom">fadeInRightBig</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Fading exits</h4>
+            <button data-test="fadeOut" class="gap-bottom">fadeOut</button>
+            <button data-test="fadeOutUp" class="gap-bottom">fadeOutUp</button>
+            <button data-test="fadeOutDown" class="gap-bottom">fadeOutDown</button>
+            <button data-test="fadeOutLeft" class="gap-bottom">fadeOutLeft</button>
+            <button data-test="fadeOutRight" class="gap-bottom">fadeOutRight</button>
+            <button data-test="fadeOutUpBig" class="gap-bottom">fadeOutUpBig</button>
+            <button data-test="fadeOutDownBig" class="gap-bottom">fadeOutDownBig</button>
+            <button data-test="fadeOutLeftBig" class="gap-bottom">fadeOutLeftBig</button>
+            <button data-test="fadeOutRightBig" class="gap-bottom">fadeOutRightBig</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Bouncing entrances</h4>
+            <button data-test="bounceIn" class="gap-bottom">bounceIn</button>
+            <button data-test="bounceInDown" class="gap-bottom">bounceInDown</button>
+            <button data-test="bounceInUp" class="gap-bottom">bounceInUp</button>
+            <button data-test="bounceInLeft" class="gap-bottom">bounceInLeft</button>
+            <button data-test="bounceInRight" class="gap-bottom">bounceInRight</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Bouncing exits</h4>
+            <button data-test="bounceOut" class="gap-bottom">bounceOut</button>
+            <button data-test="bounceOutDown" class="gap-bottom">bounceOutDown</button>
+            <button data-test="bounceOutUp" class="gap-bottom">bounceOutUp</button>
+            <button data-test="bounceOutLeft" class="gap-bottom">bounceOutLeft</button>
+            <button data-test="bounceOutRight" class="gap-bottom">bounceOutRight</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Rotating entrances</h4>
+            <button data-test="rotateIn" class="gap-bottom">rotateIn</button>
+            <button data-test="rotateInDownLeft" class="gap-bottom">rotateInDownLeft</button>
+            <button data-test="rotateInDownRight" class="gap-bottom">rotateInDownRight</button>
+            <button data-test="rotateInUpLeft" class="gap-bottom">rotateInUpLeft</button>
+            <button data-test="rotateInUpRight" class="gap-bottom">rotateInUpRight</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Rotating exits</h4>
+            <button data-test="rotateOut" class="gap-bottom">rotateOut</button>
+            <button data-test="rotateOutDownLeft" class="gap-bottom">rotateOutDownLeft</button>
+            <button data-test="rotateOutDownRight" class="gap-bottom">rotateOutDownRight</button>
+            <button data-test="rotateOutUpLeft" class="gap-bottom">rotateOutUpLeft</button>
+            <button data-test="rotateOutUpRight" class="gap-bottom">rotateOutUpRight</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one half padded">
+            <h4 class="gap-top">Lightspeed</h4>
+            <button data-test="lightSpeedIn" class="gap-bottom">lightSpeedIn</button>
+            <button data-test="lightSpeedOut" class="gap-bottom">lightSpeedOut</button>
+          </div>
+          <div class="one half padded">
+            <h4 class="gap-top">Specials</h4>
+            <button data-test="hinge" class="gap-bottom">hinge</button>
+            <button data-test="rollIn" class="gap-bottom">rollIn</button>
+            <button data-test="rollOut" class="gap-bottom">rollOut</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="one third padded">
+            <h4 class="gap-top">Spin</h4>
+            <button data-test="spin" data-timing="12000" class="gap-bottom">spin (continuous)</button>
+            <button data-test="spin-once" data-timing="2000" class="gap-bottom">spin-once</button>
+            <button data-test="spin-twice" data-timing="4000" class="gap-bottom">spin-twice</button>
+            <button data-test="spin-thrice" data-timing="6000" class="gap-bottom">spin-thrice</button>
+          </div>
+          <div class="one third padded">
+            <h4 class="gap-top">Spin Fast</h4>
+            <button data-test="spin-fast" data-timing="6000" class="gap-bottom">spin-fast (continuous)</button>
+            <button data-test="spin-fast-once" data-timing="1000" class="gap-bottom">spin-fast-once</button>
+            <button data-test="spin-fast-twice" data-timing="2000" class="gap-bottom">spin-fast-twice</button>
+            <button data-test="spin-fast-thrice" data-timing="3000" class="gap-bottom">spin-fast-thrice</button>
+          </div>
+          <div class="one third padded">
+            <h4 class="gap-top">Spin Slow</h4>
+            <button data-test="spin-slow" data-timing="30000" class="gap-bottom">spin-slow (continuous)</button>
+            <button data-test="spin-slow-once" data-timing="5000" class="gap-bottom">spin-slow-once</button>
+            <button data-test="spin-slow-twice" data-timing="10000" class="gap-bottom">spin-slow-twice</button>
+            <button data-test="spin-slow-thrice" data-timing="15000" class="gap-bottom">spin-slow-thrice</button>
+          </div>
+        </div>
+        <script type="text/javascript">
+          $(document).ready(function() {
+            var resetTest;
+            resetTest = function() {
+              return $('#animateTest').removeClass().addClass('large asphalt animated').text('I do awesome things.');
+            };
+            return $('body').on('click', '[data-test]', function(e) {
+              var _this = this;
+              resetTest();
+              clearTimeout(window.reset);
+              $('#animateTest').removeClass().addClass('large asphalt animated ' + $(this).attr('data-test')).text('I ' + $(this).attr('data-test') + '.');
+              return window.reset = setTimeout(function() {
+                return resetTest();
+              }, $(this).attr('data-timing') || 1300);
+            });
+          });
+        </script>
+      </div>

data/app/views/groundworkdocs/boxes.html.erb

@@ -0,0 +1,131 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Boxes</h1>
+            <p class="quicksand">Easily wrap content in a box</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 6 of 14</p>
+            <p><a href="buttons.html" class="blue button" rel="prev">Back</a> <a href="messages.html" class="green button" rel="next">Next: Message Boxes</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="row">
+            <div class="one whole bounceInLeft animated">
+              <div class="pad-top pad-left pad-right">
+                <h4>Boxes</h4>
+                <div class="row">
+                  <div class="one half small-tablet pad-right no-pad-mobile">
+                    <p class="box">This is a box paragraph.</p>
+                    <pre data-lang="html">&lt;p class=&quot;box&quot;&gt;This is a box paragraph.&lt;/p&gt;</pre><br>
+                    <h2 class="box">This is a box heading 2.</h2>
+                    <pre data-lang="html">&lt;h2 class=&quot;box&quot;&gt;This is a box heading 2.&lt;/h2&gt;</pre><br>
+                    <h4 class="box">This is a box heading 4.</h4>
+                    <pre data-lang="html">&lt;h4 class=&quot;box&quot;&gt;This is a box heading 4.&lt;/h4&gt;</pre><br>
+                    <h6 class="box">This is a box heading 6.</h6>
+                    <pre data-lang="html">&lt;h6 class=&quot;box&quot;&gt;This is a box heading 6.&lt;/h6&gt;</pre>
+                  </div>
+                  <div class="one half small-tablet pad-left no-pad-mobile">
+                    <div class="box">
+                      <h3>Another Box</h3>
+                      <p>Boxes can contain other elements, such as:</p>
+                      <div class="row gap-bottom">
+                        <div class="three fourths small-tablet pad-right no-pad-mobile">
+                          <input placeholder="Input fields">
+                        </div>
+                        <div class="one fourth small-tablet">
+                          <button class="block asphalt">Buttons</button>
+                        </div>
+                      </div>
+                      <table class="asphalt">
+                        <thead>
+                          <tr>
+                            <th colspan="4">Tables</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <td>Cell 1</td>
+                            <td>Cell 2</td>
+                            <td>Cell 3</td>
+                            <td>Cell 4</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      <p class="gap-top">And <em>much</em> more.</p>
+                    </div>
+                    <pre data-lang="html" class="gap-top">&lt;div class=&quot;box&quot;&gt;
+  &lt;h3&gt;Another Box&lt;/h3&gt;
+  &lt;p&gt;Boxes can contain other elements, such as:&lt;/p&gt;
+  &lt;div class=&quot;row gap-bottom&quot;&gt;
+    &lt;div class=&quot;three fourths small-tablet pad-right no-pad-mobile&quot;&gt;
+      &lt;input placeholder=&quot;Input fields&quot;&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;one fourth small-tablet&quot;&gt;
+      &lt;button class=&quot;block asphalt&quot;&gt;Buttons&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;table class=&quot;asphalt&quot;&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;
+        &lt;th colspan=&quot;4&quot;&gt;Tables&lt;/th&gt;
+      &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;
+        &lt;td&gt;Cell 1&lt;/td&gt;
+        &lt;td&gt;Cell 2&lt;/td&gt;
+        &lt;td&gt;Cell 3&lt;/td&gt;
+        &lt;td&gt;Cell 4&lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
+  &lt;p&gt;And &lt;em&gt;much&lt;/em&gt; more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+                  </div>
+                </div><br>
+                <div class="row">
+                  <div class="one half small-tablet pad-right no-pad-mobile"></div>
+                  <div class="one half small-tablet pad-left no-pad-mobile"></div>
+                </div>
+              </div>
+            </div>
+          </div><br>
+          <div class="row">
+            <div class="one half padded bounceInUp animated">
+              <h4>States</h4>
+              <p class="info box">This is an info box.</p>
+              <p class="success box">This is a success box.</p>
+              <p class="question box">This is a question box.</p>
+              <p class="alert box">This is an alert box.</p>
+              <p class="warning box">This is a warning box.</p>
+              <p class="error box">This is an error box.</p><br>
+              <div class="row">
+                <div class="one small-tablet half pad-right no-pad-mobile">
+                  <h4>Square</h4>
+                  <p class="box square">This is a square box.</p>
+                </div>
+                <div class="one small-tablet half pad-left no-pad-mobile">
+                  <h4>Round</h4>
+                  <p class="box round align-center">This is a round box.</p>
+                </div>
+              </div>
+            </div>
+            <div class="one half padded bounceInDown animated">
+              <h4>Colors</h4>
+              <p class="yellow box">This is a yellow box.</p>
+              <p class="orange box">This is a orange box.</p>
+              <p class="red box">This is a red box.</p>
+              <p class="pink box">This is a pink box.</p>
+              <p class="purple box">This is a purple box.</p>
+              <p class="asphalt box">This is a asphalt box.</p>
+              <p class="blue box">This is a blue box.</p>
+              <p class="turquoise box">This is a turquoise box.</p>
+              <p class="green box">This is a green box.</p>
+            </div>
+          </div>
+        </div>
+      </div>

data/app/views/groundworkdocs/breakpoints.html.erb

@@ -0,0 +1,143 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Targeted Breakpoints</h1>
+            <p class="quicksand">Logical <a href="media_queries.html">media queries</a> targeting browsers that meet the declared conditions</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Documentation: Breakpoints</p>
+            <p><a href="media_queries.html" class="green button">Also See: Media Queries <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Logically Named Breakpoints</h4>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Small Mobiles</dt>
+                  <dd>Designed to target mobile devices with viewport sizes smaller than an iPhone.</dd>
+                </dl>
+                <pre data-lang="css">$small-mobile: &quot;(max-width: 319px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>iPhone (up to 4S)</dt>
+                  <dd>Designed to target mobile devices with viewport sizes up to the iPhone 4/4S.</dd>
+                </dl>
+                <pre data-lang="css">$iphone: &quot;(min-device-width: 320px) and (max-device-width: 480px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>iPhone (up to 5)</dt>
+                  <dd>Designed to target mobile devies with viewport sizes up to the iPhones 5.</dd>
+                </dl>
+                <pre data-lang="css">$iphone5: &quot;(min-device-width: 320px) and (max-device-width: 568px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Mobile</dt>
+                  <dd>Designed to target mobile devices with viewport sizes similar to the larger Androids.</dd>
+                </dl>
+                <pre data-lang="css">$mobile: &quot;(max-width: 480px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Not Mobile</dt>
+                  <dd>Designed to target devices with viewport sizes greater than those within the <em>"mobile"</em> category.</dd>
+                </dl>
+                <pre data-lang="css">$not-mobile: &quot;(min-width: 481px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Small Tablet</dt>
+                  <dd>Designed to target devices with viewport sizes smaller than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$small-tablet: &quot;(max-width: 767px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Tablet</dt>
+                  <dd>Designed to target devices with viewport sizes similar to or greater than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$tablet: &quot;(min-width: 768px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>iPad (including iPad Mini)</dt>
+                  <dd>Designed to target devices with viewport sizes similar to an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$ipad: &quot;(min-width: 768px) and (max-width:1024px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>iPad (Retina only)</dt>
+                  <dd>Designed to target devices with viewport sizes similar to an iPad, and with retina display.</dd>
+                </dl>
+                <pre data-lang="css">$retina-ipad: &quot;(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Not Desktop</dt>
+                  <dd>Designed to target devices with viewport sizes up to, but not greater than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$not-desktop: &quot;(max-width: 1024px)&quot;;</pre>
+              </div>
+            </div><br>
+            <div class="row">
+              <div class="one half padded">
+                <dl>
+                  <dt>Desktop</dt>
+                  <dd>Designed to target devices with viewport sizes greater than an iPad.</dd>
+                </dl>
+                <pre data-lang="css">$desktop: &quot;(min-width: 1025px)&quot;;</pre>
+              </div>
+              <div class="one half padded">
+                <dl>
+                  <dt>Retina</dt>
+                  <dd>Designed to target devices of any size with retina display.</dd>
+                </dl>
+                <pre data-lang="css">$retina: &quot;(-webkit-min-device-pixel-ratio: 1.5)&quot;;</pre>
+              </div>
+            </div><br>
+            <hr><br>
+            <h4>Example Usage (SCSS)</h4>
+            <pre data-lang="css">.custom_thing {
+  font-size: 1em;
+  color: green;
+  @media #{$mobile} {
+    font-size: 2em;
+    color: blue;
+  }
+}</pre><br>
+            <h4>Result (CSS)</h4>
+            <pre data-lang="css">.custom_thing {
+  font-size: 1em;
+  color: green;
+}
+@media (max-width: 480px) {
+  .custom_thing {
+    font-size: 2em;
+    color: blue;
+  }
+}</pre><br>
+            <hr><br>
+          </div>
+          <div class="bounceInUp animated">
+            <h4>Media Queries</h4>
+            <p><a href="media_queries.html">Media queries</a> using these named breakpoints are what make Groundwork responsive &mdash; along with some help from Javascript when it's needed for additional functionality.</p>
+            <p><a href="media_queries.html" class="green button">Read More <i class="icon-arrow-right"></i></a></p>
+          </div>
+        </div>
+      </div>