Responsive Design

Introduction

This standard defines how responsive design MUST be implemented across the project to ensure consistent behavior across all device sizes.

Mobile-First Approach

The project SHOULD primarily use a mobile-first approach with min-width media queries via the @include media($breakpoint) mixin.

Max-Width Media Queries

max-width media queries MAY be used when they provide a cleaner solution — typically for:

• Isolated mobile-only adjustments (e.g. hiding an element only on small screens)

• Targeting a specific breakpoint range: @media (min-width: $small) and (max-width: $medium)

• Cases where the mobile-first approach would require setting a property and immediately overriding it

Raw @media with max-width SHOULD include a comment explaining the reason if it is not obvious from context.

Media Query Placement

Media queries MUST be nested inside the selector they belong to, not grouped at the end of the file:

// CORRECT
.blog-card {
  padding: $offset__element;

  @include media($medium) {
    padding: $offset__block;
  }
}

// WRONG
.blog-card {
  padding: $offset__element;
}
@media (min-width: 960px) {
  .blog-card {
    padding: $offset__block;
  }
}

Breakpoint Variables

Hardcoded pixel values MUST NOT be used in media queries. Always use the project breakpoint variables ($min, $tiny, $small, $medium, $large, $xlarge, $max).

Hover States

Hover effects MUST be wrapped in @include hover() or @include media-hover($query) to prevent issues on touch devices.

// CORRECT
.button {
  @include hover() {
    background: $color__primary-hover;
  }
}

// WRONG
.button:hover {
  background: $color__primary-hover;
}