ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ꯫

ꯃꯔꯨꯑꯣꯏꯕꯥ ꯋꯥꯈꯜꯂꯣꯅꯁꯤꯡ꯫

• ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯗꯤꯖꯥꯏꯅꯒꯤ ꯕꯤꯜꯗꯤꯡ ꯕ꯭ꯂꯣꯀꯁꯤꯡꯅꯤ꯫ ꯑꯀꯛꯅꯕꯥ ꯚꯤꯎꯄꯣꯔꯠ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯚꯥꯏꯁ ꯁꯥꯏꯖ ꯑꯃꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯗꯨ ꯀꯗꯥꯏꯗꯥ ꯑꯦꯗꯞꯇꯦꯟꯇ ꯇꯧꯕꯥ ꯌꯥꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯃꯈꯣꯌꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

• ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯅꯍꯥꯛꯀꯤ CSS ꯑꯗꯨ ꯑꯥꯔꯀꯤꯇꯦꯀꯆꯔ ꯇꯧꯅꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤ CSSꯒꯤ ꯐꯤꯆꯔ ꯑꯃꯅꯤ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯕ꯭ꯔꯥꯎꯖꯔ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯔꯦꯇꯤꯡ ꯁꯤꯁ꯭ꯇꯦꯝ ꯄꯦꯔꯥꯃꯤꯇꯔꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯀꯟꯗꯤꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ min-widthꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯗꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯌꯥꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫

• ꯃꯣꯕꯥꯏꯜ ꯑꯍꯥꯅꯕꯥ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯗꯤꯖꯥꯏꯟ ꯑꯁꯤ ꯄꯥꯟꯗꯝꯅꯤ꯫ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯥ ꯕꯦꯔꯦ ꯃꯤꯅꯤꯃꯝ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ, ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯆꯧꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯗꯤꯖꯥꯏꯟ ꯑꯗꯨ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯗꯥ ꯂꯦꯌꯔꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤ꯫ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯕꯨ ꯑꯣꯞꯇꯤꯃꯥꯏꯖ ꯇꯧꯏ, ꯔꯦꯟꯗꯔ ꯇꯧꯕꯒꯤ ꯃꯇꯝ ꯐꯒꯠꯍꯜꯂꯤ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯚꯤꯖꯤꯇꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯆꯧꯕꯥ ꯑꯦꯛꯁꯄꯔꯤꯌꯦꯟꯁ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

ꯐꯪꯂꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯒꯠꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯐꯣꯜꯇ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯶ ꯌꯥꯑꯣꯔꯤ, ꯃꯁꯤ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯒ꯭ꯔꯤꯗ ꯇꯤꯌꯔ ꯍꯥꯌꯅꯥ ꯀꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯁꯤ ꯅꯨꯡꯉꯥꯏꯅꯥ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯈꯅꯈꯤ ꯃꯈꯣꯌꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯁꯤ ꯱꯲ꯒꯤ ꯃꯜꯇꯤꯄꯜ ꯑꯣꯏꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯀꯃꯟ ꯗꯤꯚꯥꯏꯁ ꯁꯥꯏꯖꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡꯒꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯁꯨ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯑꯣꯏ-ꯃꯈꯣꯌꯅꯥ ꯌꯨꯖꯔ ꯀꯦꯁ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯚꯥꯏꯁ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯑꯀꯛꯅꯅꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯗꯦ꯫ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯔꯦꯟꯖꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯆꯦꯠꯄꯥ ꯑꯃꯁꯨꯡ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯕꯥ ꯌꯨꯝꯐꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

ꯍꯥꯌꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯌꯥꯏ—ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ _variables.scssꯁ꯭ꯇꯥꯏꯂꯁꯤꯠꯇꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯥ ꯐꯪꯒꯅꯤ꯫

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

ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯒ꯭ꯔꯤꯗ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯁꯥꯁ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯋꯥꯍꯪꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯑꯍꯥꯅꯕꯗꯥ ꯃꯣꯕꯥꯏꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯒꯠꯄꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯏꯟꯇꯔꯐꯦꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯦꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯃꯁꯤꯡ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯑꯌꯥꯝꯕꯅꯥ ꯃꯤꯅꯤꯃꯝ ꯚꯤꯎꯄꯣꯔꯠ ꯋꯥꯏꯗꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯍꯣꯡꯂꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯩꯈꯣꯌꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

ꯃꯤꯟ-ꯋꯥꯏꯗ ꯑꯣꯏꯕꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤꯅꯥ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯂꯦꯑꯥꯎꯠ, ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ, ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡꯗꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯔꯦꯟꯖꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯩ—ꯅꯠꯔꯒꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ꯫

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

ꯍꯥꯌꯔꯤꯕꯥ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯗꯥ ꯂꯥꯎꯊꯣꯀꯈꯤꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯍꯟꯗꯣꯀꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅ:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

ꯃꯦꯛꯁ-ꯋꯥꯏꯗ ꯑꯣꯏꯕꯥ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯇꯝ ꯃꯇꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯥꯏꯀꯩꯗꯥ ꯆꯠꯂꯤꯕꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ (ꯑꯄꯤꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖ ꯅꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

ꯍꯥꯌꯔꯤꯕꯥ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯂꯥꯎꯊꯣꯛꯂꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯂꯧꯏ, .02pxꯃꯈꯣꯌꯗꯒꯤ ꯂꯧꯊꯣꯀꯏ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯕꯨ ꯑꯩꯈꯣꯌꯒꯤ max-widthꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅ:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

ꯁꯤꯉ꯭ꯒꯜ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ꯫

ꯃꯤꯅꯤꯃꯝ ꯑꯃꯁꯨꯡ ꯃꯦꯛꯁꯤꯃꯝ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯋꯥꯏꯗꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖꯁꯤꯡꯒꯤ ꯁꯦꯒꯃꯦꯟꯇ ꯑꯃꯈꯛꯇꯃꯛ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯤꯛꯁꯤꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ꯫

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, @include media-breakpoint-only(md) { ... }ꯃꯁꯤꯒꯤ ꯃꯍꯩ ꯑꯣꯏꯅꯥ :

@media (min-width: 768px) and (max-width: 991.98px) { ... }

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ꯫

ꯃꯇꯧ ꯑꯁꯨꯝꯅꯥ, ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯋꯥꯏꯗꯁꯤꯡ ꯁ꯭ꯄꯦꯟ ꯇꯧꯕꯥ ꯌꯥꯏ:

@include media-breakpoint-between(md, xl) { ... }

ꯃꯁꯤꯒꯤ ꯃꯍꯩ ꯑꯣꯏꯅꯥ : ꯱.

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }