frontend-styles/src/scss/helpers/_media-query.scss

@import "../vendor/_sass-mq.scss";

@mixin media-query($args...) {
  @include mq.mq($args...) {
    @content;
  }
}
Grid, with rows and columns, see -> A number of classes have been added to control the layout in a grid-based way. To start `row` is wrapped the elements you wish to group in a horizontal line. Next up, `grid-small` and `grid-large` relate to columns and behavior on screen size. For example, `grid-large` will trigger layout changes when the screen reaches a "desktop size" and `grid-small` for "mobile size". The list of available column widths: * half * one-fourth * three-fourths * one-third * two-thirds Going in the order they are declared, for example, columns A,B - when A is one-third and B is two-thirds. This means A will occupy 33% and B will occupy 66%. Additionally, look at _sass-mq.scss file if you want to define different screen sizes. EXAMPLE: ``` <div class="row"> <div class="grid-large two-thirds"> 2/3 </div> <div class="grid-large one-third"> 1/3 </div> </div> ``` ===Sass API=== We have a helper called `media-query`. It directs calls to the sass-mq library. Say we wanted to include a breakpoint in your sass files, do the following: ``` @include media-query($from: mobile) { // content } ``` You are now generating a media-queries for mobile screens. To understand what arguments can be passed to `media-query` then look at the sass-mq documentation. [https://sass-mq.github.io/sass-mq/](https://sass-mq.github.io/sass-mq/) === Other === Technical - implementation being used in grid is flexbox. Do not expect support for standard HTML Grid Layout. 2022-02-26 15:28:51 +01:00			`@import "../vendor/_sass-mq.scss";`

			`@mixin media-query($args...) {`
			`@include mq.mq($args...) {`
			`@content;`
			`}`
			`}`