Breakpoints

In progress

HUDS components can use 5 breakpoints from narrow to overwide. They are accessible through css variables and sass variables.

# Media queries

The default way of applying the media queries is inside your scss file:

.some-class {
  @include breakpoint($narrow) {
    width: 20px;
  }
}

Max-width	Description	Css variable	Sass variable
30rem or 480px	Mobile view	`var(--breakpoint-narrow)`	`$narrow`
48rem or 768px	Tablet view	`var(--breakpoint-medium)`	`$medium`
64rem or 1024px	Desktop view	`var(--breakpoint-wide)`	`$wide`
80rem or 1280px	Large Desktop view	`var(--breakpoint-extrawide)`	`$extrawide`
90rem or 1440px	Huge Desktop view	`var(--breakpoint-overwide)`	`$overwide`