Skip to main content
Version: 2.0.0

Responsive Mixins

In YSCP, responsive design is essential for ensuring that your online store looks great on all devices. To help with this, we provide a collection of mixins for managing media queries and container queries. These mixins make it easier to apply styles based on the size of the viewport or container.

Media Query Mixins​

@mixin media​

The @mixin media mixin allows you to apply styles based on the maximum width or height of the viewport.

Parameters​

  • $size: The maximum width or height in pixels.
  • $type (optional): The type of media query. Use 'w' for width and 'h' for height. The default is 'w'.

Example Usage​

@include media(768) {
  .sidebar {
    display: none;
  }
}

@include media(1024, `'h'`) {
  .header {
    background-color: blue;
  }
}

@mixin min-media​

The @mixin min-media mixin allows you to apply styles based on the minimum width or height of the viewport.

Parameters​

  • $size: The minimum width or height in pixels.
  • $type (optional): The type of media query. Use 'w' for width and 'h' for height. The default is 'w'.

Example Usage​

@include min-media(768) {
  .sidebar {
    display: block;
  }
}

@include min-media(1024, `'h'`) {
  .header {
    background-color: green;
  }
}

Container Query Mixins​

@mixin container​

The @mixin container mixin allows you to apply styles based on the maximum width or height of a container.

Parameters​

  • $size: The maximum width or height in pixels.
  • $name (optional): The name of the container.
  • $type (optional): The type of container query. Use 'w' for width and 'h' for height. The default is 'w'.

Example Usage​

@include container(768, 'sidebar') {
  .menu {
    display: none;
  }
}

@include container(1024, 'main-content', `'h'`) {
  .footer {
    background-color: red;
  }
}

@mixin min-container​

The @mixin min-container mixin allows you to apply styles based on the minimum width or height of a container.

Parameters​

  • $size: The minimum width or height in pixels.
  • $type (optional): The type of container query. Use 'w' for width and 'h' for height. The default is 'w'.

Example Usage​

@include min-container(768) {
  .menu {
    display: block;
  }
}

@include min-container(1024, 'h') {
  .footer {
    background-color: yellow;
  }
}

Conclusion​

These responsive mixins provide a flexible and efficient way to manage styles based on viewport and container sizes. By using these mixins, you can create a responsive design that adapts to different screen sizes and container dimensions, ensuring a consistent and optimal user experience across all devices.