From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sat, 11 Aug 2018 22:06:52 +0000 (+0200)
Subject: docs: improve MediaQuery JS documentation & add only/down modifiers
X-Git-Tag: v6.6.0~1^2~2^2~7
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1cf1e96af12b53fdbcf111ee480ab7b0e6595b5c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

docs: improve MediaQuery JS documentation & add only/down modifiers
---

diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md
index f7ef9070c..1fbebdd82 100644
--- a/docs/pages/media-queries.md
+++ b/docs/pages/media-queries.md
@@ -197,22 +197,24 @@ Get the name of the current breakpoint with `MediaQuery.current`.
 Foundation.MediaQuery.current // => 'small', 'medium', etc.
 ```
 
-To see if the screen is currently a certain breakpoint or larger, use `MediaQuery.atLeast`.
-
+You can use `MediaQuery.is()` to check the breakpoint the screen is at.
 ```js
-if (Foundation.MediaQuery.atLeast('medium')) {
-  // True if medium or large
-  // False if small
-}
+Foundation.MediaQuery.is('medium') // => True for "medium" or wider
 ```
 
-To see if the screen is currently a certain breakpoint, use `MediaQuery.is`.
-
+You can also use the `up` (default), `only` and `down` modifiers like in Sass, or use the equivalent `MediaQuery.atLeast()`, `MediaQuery.only()` and `MediaQuery.upTo()`.
 ```js
-if (Foundation.MediaQuery.is('small only')) {
-  // True if small
-  // False if medium or large
-}
+// ↑ True for "medium" or wider (by default)
+Foundation.MediaQuery.is('medium up');
+Foundation.MediaQuery.atLeast('medium');
+
+// → True for "medium" only
+Foundation.MediaQuery.is('medium only');
+Foundation.MediaQuery.only('medium');
+
+// ↓ True for "medium" or smaller
+Foundation.MediaQuery.is('medium down');
+Foundation.MediaQuery.upTo('medium');
 ```
 
 To get the media query of a breakpoint, use `MediaQuery.get`.