Breakpoints
Grail uses a few predefined breakpoints. They can be found in src/variables.scss. They are as follows:
| Value (px) | Sass variable name | Layout usage |
|---|---|---|
| 768 | $grail-breakpoint-narrow | standard, twin |
| 1096 | $grail-breakpoint-middle | standard |
| 1400 | $grail-breakpoint-large | standard |
| 1600 | $grail-breakpoint-extra-large | twin |
Customizing your breakpoints
Should you need to customize the value of any given breakpoint. You may do so by creating your own build of Grail. To do this, start with the following code snippet, which makes use of the Sass @use rule to overrite the value of the narrow breakpoint.
@use "/path/to/node_modules/grail-css/src/variables.scss" with (
$grail-breakpoint-narrow: 900px
);
@import "/path/to/node_modules/grail-css/src/grail.scss";Notes
- Ensure your values still get larger from narrow to extra large.
- Some variables are used on different layouts, so ensure you test on all layouts you're using when using a custom breakpoint.
- CSS variables cannot be used as values in media queries; this is the reason for a scss build step.
- Single does not use any breakpoints. It's just a stacked series of elements.