adds media query docs page

diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md
new file mode 100644 (file)
index 0000000..40f7565
--- /dev/null
+++ b/docs/pages/media-queries.md
@@ -0,0 +1,66 @@
+---
+title: Foundation for Emails
+description: Use media queries to design responsive HTML emails that work in any email client.
+---
+
+CSS media queries allow us to adjust the display and orientation of content at different screen sizes.
+
+---
+
+## Default Media Query
+
+Foundation for Emails has one breakpoint:
+
+- Small: 596 pixels or smaller.
+
+Many components can be modified at different screen sizes using special breakpoint classes. The grid is the most obvious example. 
+
+**CSS Version**
+In the code below, the left-hand column is six columns wide on small screens, hence `.small-6`. On medium-sized screens, the class `.medium-4` overrides the small style, changing the column to be four wide.
+
+**Inky Version**
+In Inky, you can define the width by using the `small="x"` and `large="x"` attributes.
+
+```
+<row>
+  <columns small="6" large="4"></columns>
+  <columns small="6" large="8"></columns>
+</row>
+```
+
+---
+
+## Using the Media Query
+
+The media query will wrap the styles you wish to affect. Because there is only one breakpoint to consider and it's a max-width, your mobile styles or overrides will go in a media query. If you're using the CSS version of Foundation, use this media query to imitate the core breakpoint:
+
+```
+/* Small only */
+@media screen and (max-width: 596px) {}
+```
+
+The Sass version of Foundation uses a convenient variable to set the breakpoint width. Use this media query to imitate the core breakpoint:
+
+```
+/* Small only */
+@media only screen and (max-width: #{$global-breakpoint}) {}
+```
+
+---
+
+## Changing the Breakpoint
+
+Changing the breakpoint is easy in the Sass version. In the `_settings.scss` you can control the width of this breakpoint.
+
+```scss
+$global-breakpoint: $global-width + $global-gutter;
+```
+
+The `$global-breakpoint` is a combined width of the `$global-width` and the `$global gutter`. You could hard-code a pixel value here instead of the variables or change the `$global-width` (recommended) as it takes account for the gutter calculation.
+
+```scss
+$global-width: 580px;
+```
+
+
+

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index 89ff753f28dc9abe8334fab33637a073a7920887..a7caf675705dedd6ff92a4845f7bf31f37144933 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -12,6 +12,7 @@
   <li class="docs-nav-title">Guides</li>
   <li><a href="sass.html">Using Sass</a></li>
   <li><a href="inky.html">Using Inky</a></li>
+  <li><a href="media-query.html">Media Queries</a></li>
   <li><a href="zurb-stack.html">ZURB Stack</a></li>
   <li><a href="compatibility.html">Compatibility</a></li>
   <li><a href="migration.html">Migrate from Ink</a></li>
@@ -22,7 +23,6 @@
   <li><a href="callout.html">Callout</a></li>
   <li><a href="global.html">Global Styles</a></li>
   <li><a href="grid.html">Grid</a></li>
-  <li><a href="media-query.html">Media Queries</a></li>
   <li><a href="thumbnail.html">Thumbnail</a></li>
   <li><a href="typography.html">Typography</a></li>
   <li><a href="visibility.html">Visibility Classes</a></li>