From b441742867bf828dc8797d19c7e4e1191f3cbf5b Mon Sep 17 00:00:00 2001
From: Arnold Daniels <arnold@adaniels.nl>
Date: Tue, 17 Jul 2012 13:45:23 +0200
Subject: [PATCH] Documented `.row-desktop` Added row desktop to
 jasny/responsive.less

---
 docs/assets/css/docs.css                  |  5 +++++
 docs/templates/pages/index.mustache       |  4 ++++
 docs/templates/pages/scaffolding.mustache | 22 ++++++++++++++++++++++
 less/jasny/responsive.less                |  1 +
 4 files changed, 32 insertions(+)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 5b576964..7325f728 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -903,6 +903,11 @@ form.well {
     border-top-width: 0px;
     padding: 0;
   }
+  
+  /* Space out the show-grid examples */
+  .row-desktop.show-grid [class*="span"] {
+    margin-bottom: 5px;
+  }
 }
 
 
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 5e9a2bfb..ebf423f4 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -71,6 +71,10 @@
       <h3><a href="./scaffolding.html#layouts">{{_i}}Semi-fluid layout{{/i}}</a></h3>
       <p>{{_i}}Get the best of both worlds with a semi-fluid layout. It acts as a fixed layout for big screens. For smaller screens, it behaves like a fluid layout.{{/i}}</p>
     </div>
+    <div class="span3">
+      <h3><a href="./scaffolding.html#responsive">{{_i}}Desktop rows{{/i}}</a></h3>
+      <p>{{_i}}By default columns of a row are show next to each other for tablets and desktops and not for phones. A desktop row displays acts like a row for desktops only and not for tablets or phones.{{/i}}</p>
+    </div>
   </div>
   <div class="row">
     <div class="span3">
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index b7e3f6b3..19ea675b 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -569,6 +569,28 @@
     </div><!-- /.span -->
   </div><!-- /.row -->
 
+  <!-- Desktop row -->
+  <h2>{{_i}}Desktop rows{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}By default columns of a <code>.row</code> are show next to each other, however for phones the columns are show underneath each other. By adding the class <code>.row-desktop</code> to a row,
+      it will display the columns underneath each other for tablets as well.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h3>{{_i}}Test case{{/i}}</h3>
+      <p>{{_i}}Resize your browser to see the rows behave differently. They look the same for desktops and phones, but different for tablets.{{/i}}</p>
+      <div class="row show-grid">
+        <div class="span3">Normal row 1</div>
+        <div class="span3">Normal row 2</div>
+        <div class="span2">Normal row 3</div>
+      </div>
+      <div class="row show-grid row-desktop">
+        <div class="span3">Desktop row 1</div>
+        <div class="span3">Desktop row 2</div>
+        <div class="span2">Desktop row 3</div>
+      </div>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
       
   <div class="row">
     <div class="span4">
diff --git a/less/jasny/responsive.less b/less/jasny/responsive.less
index 3abd9df2..dc31c333 100644
--- a/less/jasny/responsive.less
+++ b/less/jasny/responsive.less
@@ -14,6 +14,7 @@
 
 // Grid system and page structure
 @import "layouts-semifluid.responsive.less";
+@import "row-desktop.responsive.less";
 
 // Base CSS
 @import "forms.responsive.less";