Skip to content

Latest commit

 

History

History
113 lines (84 loc) · 3.04 KB

breakpoints.md

File metadata and controls

113 lines (84 loc) · 3.04 KB

_breakpoints.scss

File includes breakpoint viewport sizes and media queries.

List of content:

Default variables

Breakpoints are defined as a map of (name: minimum width), order from small to large:
xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px)
The map defined in the $grid-breakpoints global variable is used as the $breakpoints argument by default.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Mixin media-breakpoint-up

Description

Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
Makes the content of class apply to the given breakpoint and wider.

Parameters

  • $name - name of breakpoint (included in $grid-breakpoints) (required)
  • $breakpoints - map defined in the $grid-breakpoints

Usage:

Changing font size for devices with higher screen resolution than small devices

.exampleClass {
    @include media-breakpoint-up (sm) {
        font-size: 16px;
    }
}

Mixin media-breakpoint-down

Description

Media of at most the maximum breakpoint width. No query for the largest breakpoint.
Makes the content of class apply to the given breakpoint and narrower.

Parameters

  • $name - name of breakpoint (included in $grid-breakpoints) (required)
  • $breakpoints - map defined in the $grid-breakpoints

Usage:

Changing font size for devices with lower screen resolution than large devices

.exampleClass {
    @include media-breakpoint-down (lg) {
        font-size: 14px;
    }
}

Mixin media-breakpoint-between

Description

Parameters

  • $lower - name of lower breakpoint (included in $grid-breakpoints) (required)
  • $upper - name of upper breakpoint (included in $grid-breakpoints) (required)
  • $breakpoints - map defined in the $grid-breakpoints

Usage:

Changing font size for devices with screen resolution between medium and large devices

.exampleClass {
    @include media-breakpoint-between (md, lg) {
        font-size: 14px;
    }
}

Mixin media-breakpoint-only

Description

Media between the breakpoint's minimum and maximum widths.
No minimum for the smallest breakpoint, and no maximum for the largest one.
Makes the content of class apply only to the given breakpoint, not viewports any wider or narrower.

Parameters

  • $name - name of lower breakpoint (included in $grid-breakpoints) (required)
  • $breakpoints - map defined in the $grid-breakpoints

Usage:

Changing font size for devices with lower screen resolution than large devices

.exampleClass {
    @include media-breakpoint-only (lg) {
        font-size: 14px;
    }
}