@prestashopcorp/ps-media-query

A lightweight SCSS library providing intuitive mixins for responsive design. Built for PrestaShop themes and modern web projects.

Features

• 🎯 Easy-to-use tools for managing media queries (up, down, only, between)
• 🛠️ Customizable breakpoints and media expressions
• 📱 Uses modern media query range syntax (@media (width >= 768px)). Compatible with modern browsers caniuse.com/css-media-range-syntax
• 🪲 Debug mode to help you visualize which media queries is triggered
• 📦 Zero dependencies

Installation

You can install the library in your project using npm:

npm install @prestashopcorp/ps-media-query

Usage

Load the library in your project:

@use "@prestashopcorp/ps-media-query" as *;

You can also load the library using with attributes to define configuration options:

@use "@prestashopcorp/ps-media-query" as * with (
  // Enable debug mode
  $debug: true,
  // Define custom breakpoints
  $breakpoints: (
    // Your custom breakpoints
    "xs": 0,
    "sm": 576px,
    // ...
  )
);

Use the existing mixins to create media queries:

.my-element {
  // Will apply styles for screens larger than md breakpoint
  @include ps-media-up(md) {
    color: red;
  }
}

Old way to load the library with import:

// Need to override config ?
// Define config options before importing the library
$debug: true;

// Import the library
@import "@prestashopcorp/ps-media-query";

Default Breakpoints

The library includes a set of default breakpoints for common screen sizes. You can customize these or define your own. Note: smallest breakpoint has to be set to 0.

$breakpoints: (
  "xs": 0,
  "sm": 576px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1400px,
) !default;

Available Mixins

• ps-media-up($breakpoint): Applies styles for screens larger than the specified breakpoint
• ps-media-down($breakpoint): Applies styles for screens smaller than the specified breakpoint
• ps-media-only($breakpoint): Applies styles only for the specified breakpoint
• ps-media-between($min, $max): Applies styles between two breakpoints

Custom Media Query

You can create custom media queries by combining mixins and expressions.

@include ps-media-up(md, $expressions: (get-expression(landscape), get-expression(hover))) {
  .my-element {
    color: red;
  }
}

Debug Mode

Enable debug mode to visualize which media queries breakpoints are applied in your browser's console.

@use "@prestashopcorp/ps-media-query" as * with (
  $debug: true
);