#### 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
-----------|------------
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.
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');
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');
```
## 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
<p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
### 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 <a href="sass.html#the-settings-file">Settings File</a>.
+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 <a href="sass.html#the-settings-file">Settings File</a>.
<a class="" data-open-video="1:28"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
/**
* 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.
* 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);
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
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
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
projects / thirdparty / foundation / foundation-sites.git / commitdiff
