This is documentation for Neighborhood v1 and may be outdated. Please visit the latest Neighborhood Design System documentation for latest features.

Breakpoints
draft

Breakpoints used in Neighborhood.

Name Key Token Size Classification
extra small xs $nbhd-breakpoint-xs ≥ 375px mobile
small sm $nbhd-breakpoint-sm ≥ 544px mobile
medium md $nbhd-breakpoint-md ≥ 768px tablet
large lg $nbhd-breakpoint-lg ≥ 1024px desktop
extra large xl $nbhd-breakpoint-xl ≥ 1200px desktop
extra extra large xxl $nbhd-breakpoint-xxl ≥ 1400px desktop

Media Query Mixins

Width Media Query

// Width Media Query
@mixin nbhd-mq($width, $query: 'min') {
  
  @if ( $width > 0 ) {
    @media (#{$query}-width: $width) {
      @content;
    }
  } @else {
    @content;
  }

}


.element {
  //..

  @include nbhd-mq($nbhd-breakpoint-md) {
    // styles for viewport width >= 768px

  }
}

Height Media Query

// Height Media Query
@mixin nbhd-mq-height($height, $query: 'min') {

  @if ( $height > 0 ) {
    @media (#{$query}-height: $height) {
      @content;
    }
  } @else {
    @content;
  }

}


.element {
  //..

  @include nbhd-mq-height(300px) {
    // styles for viewport height >=300px

  }
}