/*
---
name: Responsive
category: Foundations/Grid
tag: grid
---

Classic system like bootstrap provides us responsive classes at Column level. For example, we could set the width of a column based on different media queries: `col-md-6 col-sm-3 ...`. This approach is ok, but it favors the fragmentation of the design because every column of every row can have a different behaviour.

Also, it polutes our HTML code with tons of CSS classes and sometimes it's really difficult to check the behaviour of a column.

To avoid this situation, I set the "responsive classes" at Row level. Now, we can set how the columns of the row will change across different sizes. For example, if we want to change the behaviour of the row for mobile screens we can add those classes to the row:

* `collapse-on-phone`
* `collapse-2-on-phone`
* `collapse-3-on-phone`

`collapse-2-on-phone` means that the row will display 2 columns per row on phone screens. We have the same classes for other screen names:

* `phone`
* `phone-land`
* `tablet`
* `desktop`
* `wide`

#### Below and Above

`collapse-on-x` applies the rule to an specific media query. That means the `collapse-on-tablet` class only collapses the columns when the users is between the tablet minimum and maximum.

If you want to collapse a row above or below an specific screen size, you can use the `a` and `b` prefixes:

* `collapse-a-phone`
* `collapse-a-phone-land` `collapse-b-phone-land`
* `collapse-a-tablet` `collapse-b-tablet`
* `collapse-a-desktop` `collapse-b-desktop`
* `collapse-b-wide`

```html
<div class="container">
  <div class="row collapse-3-on-tablet collapse-2-on-phone-land collapse-on-phone">
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
  </div>

  <div class="row collapse-3-on-tablet collapse-2-b-tablet">
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
    <div class="col-2"><article>2</article></div>
  </div>

  <div class="row">
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
  </div>
</div>
```
*/
.container .row {
  /**
   * General behviour
   *
   * NOTE: Now, we're going to disable this functionality to avoid incompatibilities with the
   * current CSS code of our products
   */
  // @include mappy-query('tablet') {
  //   @include grid-collapse-by-columns-on(3);
  // }
  //
  // @include mappy-query('phone-land') {
  //   @include grid-collapse-by-columns-on(2);
  // }
  //
  // @include mappy-bp(max-width sm) {
  //   @include grid-collapse();
  // }

  // Collapse-a has the lowest priority, it will be imported the first one
  // Collapse-b has a higer priorioty, it will be imported after Collapse-a
  // Collapse-on has the highest priority, it will be imported the last one

  /**
   * Above media queries
   */
   @each $name in $grid-collapse-above {
    @include mappy-query($name) {
      @include grid-collapse-on-prefix($name);
      @include grid-collapse-by-columns-on-prefix(2, $name);
      @include grid-collapse-by-columns-on-prefix(3, $name);
    }
  }

  /**
   * Below media queries
   */
   @each $name in $grid-collapse-below {
    @include mappy-query($name) {
      @include grid-collapse-on-prefix($name);
      @include grid-collapse-by-columns-on-prefix(2, $name);
      @include grid-collapse-by-columns-on-prefix(3, $name);
    }
  }

  /**
   * Specific media queries
   */
  @each $name in $grid-collapse-on {
    @include mappy-query($name) {
      $breakpoint: "on-#{$name}";
      @include grid-collapse-on-prefix($breakpoint);
      @include grid-collapse-by-columns-on-prefix(2, $breakpoint);
      @include grid-collapse-by-columns-on-prefix(3, $breakpoint);
    }
  }
}