From aefed0ada9791338be11dd5318b24f17f517d51a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 12 Aug 2013 00:48:36 -0700
Subject: [PATCH] fixes #9317: document media queries

---
 _includes/nav-css.html |  1 +
 css.html               | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/_includes/nav-css.html b/_includes/nav-css.html
index 921dfe0b2e..2024883708 100644
--- a/_includes/nav-css.html
+++ b/_includes/nav-css.html
@@ -15,6 +15,7 @@
 <li>
   <a href="#grid">Grid system</a>
   <ul class="nav">
+    <li><a href="#grid-media-queries">Media queries</a></li>
     <li><a href="#grid-options">Available options</a></li>
     <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
     <li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>
diff --git a/css.html b/css.html
index 04843a1989..fa738f09ea 100644
--- a/css.html
+++ b/css.html
@@ -83,6 +83,29 @@ base_url: "../"
     </div>
     <p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
 
+    <h3 id="grid-media-queries">Media queries</h3>
+    <p>We use the following media queries to create our the key breakpoints in our grid system.</p>
+{% highlight css %}
+/* Extra small devices (phones, up to 480px) */
+/* No media query since this is the default in Bootstrap */
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: @screen-tablet) { ... }
+
+/* Medium devices (tablets, 992px and up) */
+@media (min-width: @screen-desktop) { ... }
+
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: @screen-large-desktop) { ... }
+{% endhighlight %}
+    <p>We ocassionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
+{% highlight css %}
+@media (max-width: @screen-phone-max) { ... }
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... }
+@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... }
+@media (min-width: @screen-large-desktop) { ... }
+{% endhighlight %}
+
     <h3 id="grid-options">Grid options</h3>
     <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
     <div class="bs-table-scrollable">