Add CSS media queries corresponding to small/medium/large breakpoints to docs #7474

diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md
index 01a0629943b9eddf9ec7add65d8877fb2863db96..7534ba3f1bab5c8fb91f91c498d4da36cdb02881 100644 (file)
--- a/docs/pages/media-queries.md
+++ b/docs/pages/media-queries.md
@@ -9,7 +9,7 @@ tags:
  
 ## Default Media Queries
 
-Foundation for Sites has three core breakpoint ranges.
+Foundation for Sites has three core breakpoints:
 
 - **Small:** any screen.
 - **Medium:** any screen 640 pixels or wider.
@@ -24,6 +24,25 @@ Many components can be modified at different screen sizes using special *breakpo
 </div>
 ```
 
+If you're using the CSS version of Foundation, use these media queries to imitate the three core breakpoints:
+
+```css
+/* Small only */
+@media screen and (max-width: 39.9375em) {}
+
+/* Medium and up */
+@media screen and (min-width: 40em) {}
+
+/* Medium only */
+@media screen and (min-width: 40em) and (max-width: 63.9375em) {}
+
+/* Large and up */
+@media screen and (min-width: 64em) {}
+
+/* Large only */
+@media screen and (min-width: 64em) and (max-width: 74.9375em) {}
+```
+
 ---
 
 ## Changing the Breakpoints