From a1053cdf42cd92c431ab0ea05fc3ff684f66b5ea Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 7 Oct 2018 00:28:13 +0200 Subject: [PATCH] docs: use "smaller" and "larger" to describe breakpoints in Grid/Media Query doc --- docs/pages/grid.md | 2 +- docs/pages/media-queries.md | 10 +++++----- docs/pages/prototyping-utilities.md | 2 +- docs/pages/typography-base.md | 2 +- js/foundation.util.mediaQuery.js | 3 +-- test/javascript/util/mediaQuery.js | 6 +++--- 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/docs/pages/grid.md b/docs/pages/grid.md index ff5a56935..04cdbe8bc 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -360,7 +360,7 @@ In order to work around browsers' different rounding behaviors, Foundation will #### Responsive Gutters -The grid *gutter*—the space between two columns in a row, and the space between the edge of a grid and the edge of the page—is responsive, and becomes wider on larger screens. +The grid *gutter*—the space between two columns in a row, and the space between the edge of a grid and the edge of the page—is responsive, and becomes larger on larger screens. Breakpoint | Gutter Size -----------|------------ diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md index 1fbebdd82..b2c1aa00f 100644 --- a/docs/pages/media-queries.md +++ b/docs/pages/media-queries.md @@ -18,8 +18,8 @@ tags: Foundation for Sites has three core breakpoints: - **Small:** any screen. -- **Medium:** any screen 640 pixels or wider. -- **Large:** any screen 1024 pixels or wider. +- **Medium:** any screen 640 pixels or larger. +- **Large:** any screen 1024 pixels or larger. Many components can be modified at different screen sizes using special *breakpoint classes*. The grid is the most obvious example. 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. @@ -199,12 +199,12 @@ Foundation.MediaQuery.current // => 'small', 'medium', etc. You can use `MediaQuery.is()` to check the breakpoint the screen is at. ```js -Foundation.MediaQuery.is('medium') // => True for "medium" or wider +Foundation.MediaQuery.is('medium') // => True for "medium" or larger ``` 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 -// ↑ True for "medium" or wider (by default) +// ↑ True for "medium" or larger (by default) Foundation.MediaQuery.is('medium up'); Foundation.MediaQuery.atLeast('medium'); @@ -212,7 +212,7 @@ Foundation.MediaQuery.atLeast('medium'); Foundation.MediaQuery.is('medium only'); Foundation.MediaQuery.only('medium'); -// ↓ True for "medium" or smaller +// ↓ True for "medium" or larger Foundation.MediaQuery.is('medium down'); Foundation.MediaQuery.upTo('medium'); ``` diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md index 3aa7041ba..c51456bba 100644 --- a/docs/pages/prototyping-utilities.md +++ b/docs/pages/prototyping-utilities.md @@ -304,7 +304,7 @@ This creates a tiny separator below the heading of an element and is usually use ## Font Styling -You can use font styling to style your text. You can change the font styling by adding `font-normal`, `font-bold`, `font-italic` to an element. You can also wider the text of an element with `font-wide`. +You can use font styling to style your text. You can change the font styling by adding `font-normal`, `font-bold`, `font-italic` to an element. You can also larger the text of an element with `font-wide`. ```html_example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md index 8bd9cf043..8ee764ea2 100644 --- a/docs/pages/typography-base.md +++ b/docs/pages/typography-base.md @@ -61,7 +61,7 @@ Foundation includes styles for all headings—they're balanced and sized alo ### Header Styles -The framework includes two typographic scales—one uses a narrow range of sizes for small-sized screens, and the other uses a wider range of sizes for medium- and larger-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the `$header-styles` map in your project's Settings File. +The framework includes two typographic scales—one uses a narrow range of sizes for small-sized screens, and the other uses a larger range of sizes for medium- and larger-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the `$header-styles` map in your project's Settings File. Watch this part in video diff --git a/js/foundation.util.mediaQuery.js b/js/foundation.util.mediaQuery.js index ef31362c6..42f0790a0 100644 --- a/js/foundation.util.mediaQuery.js +++ b/js/foundation.util.mediaQuery.js @@ -144,7 +144,7 @@ var MediaQuery = { /** * Checks if the screen is within the given breakpoint. - * If smaller than the breakpoint of wider than its upper limit, returns false. + * If smaller than the breakpoint of larger than its upper limit it returns false. * @function * @param {String} size - Name of the breakpoint to check. * @returns {Boolean} `true` if the breakpoint matches, `false` otherwise. @@ -157,7 +157,6 @@ var MediaQuery = { * Checks if the screen is within a breakpoint or smaller. * @function * @param {String} size - Name of the breakpoint to check. - * @returns {Boolean} `true` if the breakpoint matches, `false` if it's wider. */ upTo(size) { const nextSize = this.next(size); diff --git a/test/javascript/util/mediaQuery.js b/test/javascript/util/mediaQuery.js index 6e108dfd0..c96a3df3f 100644 --- a/test/javascript/util/mediaQuery.js +++ b/test/javascript/util/mediaQuery.js @@ -72,7 +72,7 @@ describe('MediaQuery utils', function () { plugin.atLeast('xlarge').should.be.false; }); - it('returns "true" when wider than the given breakpoint', function () { + it('returns "true" when larger than the given breakpoint', function () { $iframe.attr('width', 1201); // just after the "xlarge" breakpoint (_window.innerWidth); // force the browser to handle the new width synchronously @@ -103,7 +103,7 @@ describe('MediaQuery utils', function () { plugin.only('large').should.be.false; }); - it('returns "false" when wider than given breakpoint', function () { + it('returns "false" when larger than the given breakpoint', function () { $iframe.attr('width', 1024); // just after the "medium" breakpoint (_window.innerWidth); // force the browser to handle the new width synchronously @@ -134,7 +134,7 @@ describe('MediaQuery utils', function () { plugin.upTo('xlarge').should.be.true; }); - it('returns "false" when wider than the next breakpoint', function () { + it('returns "false" when larger than the next breakpoint', function () { $iframe.attr('width', 1441); // just after the "xxlarge" breakpoint (_window.innerWidth); // force the browser to handle the new width synchronously -- 2.47.2