chattigo-webkit 1.19.7

Breakpoints Mixins

@mixin media-breakpoint-up()

Helper mixin to easily create media queries that goes up, down or in between breakpoints.

Parameters & Output

$name: (variable)

Media Name

$breakpoints: (array)

$grid-breakpoints

{CSS output} (code block)

Media query according display definition.

Example

scss 
.block-name {
  @include media-breakpoint-up(tablet) {
    some: attributes;
  }
  @include media-breakpoint-up(desktop) {
    some: attributes;
  }
}
css compiled 
@media (min-width: 768px) {
  .block-name {
    some: attributes;
  }
}

@media (min-width: 1194px) {
  .block-name {
    some: attributes;
  }
}

Requires

@function breakpoint-min()

$grid-breakpoints [private]

Parameters & Output

$name: (variable)

Media Name

$breakpoints: (array)

$grid-breakpoints

{CSS output} (code block)

Media query according display definition.

Example

scss 
.block-name {
  @include media-breakpoint-down(tablet) {
    some: attributes;
  }
  @include media-breakpoint-down(desktop) {
    some: attributes;
  }
}
css compiled 
@media (max-width: 823.98px) {
  .block-name {
    some: attributes;
  }
}

@media (max-width: 1288.98px) {
  .block-name {
    some: attributes;
  }
}

Requires

@function breakpoint-max()

$grid-breakpoints [private]

Parameters & Output

$lower: (variable)

Media Name

$upper: (variable)

Media Name

$breakpoints: (array)

$grid-breakpoints

{CSS output} (code block)

Media query according display definition.

Example

scss 
.block-name {
  @include media-breakpoint-between(tablet, desktop) {
    some: attributes;
  }
  @include media-breakpoint-between(phone, desktop) {
    some: attributes;
  }
}
css compiled 
@media (min-width: 768px) and (max-width: 1288.98px) {
  .block-name {
    some: attributes;
  }
}

@media (min-width: 320px) and (max-width: 1288.98px) {
  .block-name {
    some: attributes;
  }
}

Parameters & Output

$name: (variable)

Media Name

$breakpoints: (array)

$grid-breakpoints

{CSS output} (code block)

Media query according display definition.

Example

scss 
.block-name {
  @include media-breakpoint-only(tablet) {
    some: attributes;
  }
  @include media-breakpoint-only(desktop) {
    some: attributes;
  }
}
css compiled 
@media (min-width: 768px) and (max-width: 823.98px) {
  .block-name {
    some: attributes;
  }
}

@media (min-width: 1194px) and (max-width: 1288.98px) {
  .block-name {
    some: attributes;
  }
}