Adaptive

Type: Mixin

@include adaptive();

* You can call mixins with or without gls- namespace (e.g. @include gls-adaptive();).

Adaptive Sass mixin helps you to set max-width value to the containing elements based on the breakpoint values defined in the _map-for-breakpoints.scss file, and also specifies a $gutter value, where the edges of a browser screen can most closely get to the edges of the selected element.

Tip: Adaptive mixin works best with the percentage values.

Github Source Code

What is Adaptive Design?

Adaptive design is a graphical user interface design that responds differently to various device screen sizes. Adaptive design typically uses multiple fixed layout sizes and when it detects the device size, it selects the best layout for this specific screen size.

As for the Adaptive Sass mixin, it provides the fastest and most consistent adaptive design option for you.

Arguments

Name	Type	Description
`$gutter`	`number (with unit)`	Accepts only one value and sets it for all the breakpoints. The default value is set to `30px`.

* Apply this mixin to your containing element of your layout, and then narrow or widen your browser screen to test it!

Examples

Simply call the mixin without passing any arguments. Default $gutter value is 30px.

.main-container{
  @include adaptive;
}

//CSS Output
.main-container {
  margin: 0 auto;
}
@media (min-width: 576px) {
  .main-container {
    max-width: calc(576px - (30px * 2));
  }
}
@media (min-width: 768px) {
  .main-container {
    max-width: calc(768px - (30px * 2));
  }
}
@media (min-width: 992px) {
  .main-container {
    max-width: calc(992px - (30px * 2));
  }
}
@media (min-width: 1200px) {
  .main-container {
    max-width: calc(1200px - (30px * 2));
  }
}

Try passing an argument value with em unit (you can use any kind of length units here: px, em, rem, percentage etc. will be just fine).

.main-container{
  @include adaptive(2em);
}

//CSS Output
.main-container {
  margin: 0 auto;
}
@media (min-width: 576px) {
  .main-container {
    max-width: calc(576px - (2em * 2));
  }
}
@media (min-width: 768px) {
  .main-container {
    max-width: calc(768px - (2em * 2));
  }
}
@media (min-width: 992px) {
  .main-container {
    max-width: calc(992px - (2em * 2));
  }
}
@media (min-width: 1200px) {
  .main-container {
    max-width: calc(1200px - (2em * 2));
  }
}