Responsive Design

Termeh provides utilities for managing responsive breakpoints, allowing you to apply styles conditionally based on device width. You can retrieve specific breakpoint values, get all defined breakpoints, or wrap your CSS in media queries using the provided mixins. A collection of functions and mixins is also available to efficiently handle responsive design, targeting specific devices, ranges, or interaction types (touch vs non-touch) with predefined media queries.

Device Size Mixins

Each mixin wraps content in a media query targeting specific device ranges.

Signatures:

@mixin mobile();
@mixin tablet();
@mixin tablet-only();
@mixin until-desktop();
@mixin desktop();
@mixin desktop-only();
@mixin until-widescreen();
@mixin widescreen();
@mixin widescreen-only();
@mixin until-fullhd();
@mixin fullhd();

Example:

@include termeh.mobile() {
  .container {
    padding: 1rem;
  }
}

@include termeh.tablet-only() {
  .container {
    padding: 2rem;
  }
}

@include termeh.desktop() {
  .container {
    padding: 3rem;
  }
}

Device capabilities

Touch Device Interaction

Applies styles for devices without hover (touch devices).

Signature:

@mixin touch();

Example:

@include termeh.touch() {
  .button {
    border: none;
  }
}

Non-Touch Device Interaction

Applies styles for devices that support hover (non-touch devices).

Signature:

@mixin non-touch();

Example:

@include termeh.non-touch() {
  .button {
    border: 2px solid black;
  }
}

Fine Pointer Device Interaction

Applies styles for devices with a fine pointer (mouse, stylus).

Signature:

@mixin pointer-fine();

Example:

@include termeh.pointer-fine() {
  .button {
    outline: 1px dashed;
  }
}

Coarse Pointer Device Interaction

Applies styles for devices with a coarse pointer (touch).

Signature:

@mixin pointer-coarse();

Example:

@include termeh.pointer-coarse() {
  .button {
    outline: none;
  }
}

Orientation & Resolution

Retina Display

Applies styles for high-resolution (retina) displays.

Signature:

@mixin retina();

Example:

@include termeh.retina() {
  .icon {
    background-image: url("icon@2x.png");
  }
}

Portrait Orientation

Applies styles for portrait device orientation.

Signature:

@mixin portrait();

Example:

@include termeh.portrait() {
  .container {
    flex-direction: column;
  }
}

Landscape Orientation

Applies styles for landscape device orientation.

Signature:

@mixin landscape();

Example:

@include termeh.landscape() {
  .container {
    flex-direction: row;
  }
}

User preferences

Prefers HDR

Applies styles the device supports high dynamic range (HDR).

Signature:

@mixin prefers-hdr();

Example:

.heading-hero {
  @include termeh.prefers-hdr() {
    background-image: url("/media/image@hdr.png");
  }
}

Prefers Dark Scheme

Applies styles when the user prefers a dark color scheme.

Signature:

@mixin prefers-dark();

Example:

@include termeh.prefers-dark() {
  body {
    background: #222;
    color: #eee;
  }
}

Prefers Light Scheme

Applies styles when the user prefers a light color scheme.

Signature:

@mixin prefers-light();

Example:

@include termeh.prefers-light() {
  body {
    background: #fff;
    color: #222;
  }
}

Prefers Reduced Motion

Applies styles when the user prefers reduced motion.

Signature:

@mixin prefers-reduced-motion();

Example:

@include termeh.prefers-reduced-motion() {
  .animation {
    animation: none;
  }
}

Prefers More Contrast

Applies styles when the user prefers more contrast.

Signature:

@mixin prefers-more-contrast();

Example:

@include termeh.prefers-more-contrast() {
  body {
    filter: contrast(1.2);
  }
}

Prefers Less Contrast

Applies styles when the user prefers less contrast.

Signature:

@mixin prefers-less-contrast();

Example:

@include termeh.prefers-less-contrast() {
  body {
    filter: contrast(0.8);
  }
}

Print

Print Media

Applies styles for print media.

Signature:

@mixin print();

Example:

@include termeh.print() {
  .header {
    display: none;
  }
}

Non-Print Media

Applies styles for non-print media (e.g., screen).

Signature:

@mixin not-print();

Example:

@include termeh.not-print() {
  .print-tip {
    display: none;
  }
}

From

Applies styles starting from a specific breakpoint (min-width) or generates an error if the device is invalid.

Signature:

@mixin from($device: "tablet" | "desktop" | "widescreen" | "fullhd");

Example:

@include termeh.from("tablet") {
  .container {
    padding: 2rem;
  }
}

Until

Applies styles up to a specific breakpoint (max-width) or generates an error if the device is invalid.

Signature:

@mixin until($device: "tablet" | "desktop" | "widescreen" | "fullhd");

Example:

@include termeh.until("desktop") {
  .container {
    padding: 1rem;
  }
}

Media Query

Gets a media query string by its name or generates an error if the media query is invalid.

Signature:

@function media-query($name: STRING): STRING;

Example:

$mobile-query: termeh.media-query("mobile"); // "screen and (max-width: 768px)"
$tablet-query: termeh.media-query("tablet"); // "screen and (min-width: 769px)"

Available Queries

Key	Value
until-fullhd	screen and (max-width: 1407px)
until-widescreen	screen and (max-width: 1215px)
until-desktop	screen and (max-width: 1023px)
tablet	screen and (min-width: 769px)
desktop	screen and (min-width: 1024px)
widescreen	screen and (min-width: 1216px)
fullhd	screen and (min-width: 1408px)
mobile	screen and (max-width: 768px)
tablet-only	screen and (min-width: 769px) and (max-width: 1023px)
desktop-only	screen and (min-width: 1024px) and (max-width: 1215px)
widescreen-only"	screen and (min-width: 1216px) and (max-width: 1407px)

Media Queries

Gets a filtered map of media queries, returning both names and values, for iteration.

Signature:

@function media-queries($includes: LIST = null, $excludes: LIST = null):
    MAP<STRING, STRING>;

Example:

.container {
  @each $name, $mq in termeh.media-queries(("desktop", "tablet")) {
    &.is-#{$name} {
      @media $mq {
        // Use responsive mixins for better handling of breakpoints
      }
    }
  }
}

Breakpoint

Gets the numeric value of a specific breakpoint or generates an error if the breakpoint is invalid.

Signature:

@function breakpoint($devince: STRING): NUMBER;

Example:

$tablet: termeh.breakpoint("tablet"); // 769px
$desktop: termeh.breakpoint("desktop"); // 1024px

Available Devices

Key	Value
tablet	769px
desktop	1024px
widescreen	1216px
fullhd	1408px

Breakpoints

Returns a map of all breakpoints with their names and values for iteration.

Signature:

@function breakpoints(): MAP<STRING, NUMBER>;

Example:

.container {
  @each $name, $breakpoint in termeh.breakpoints() {
    // Use responsive mixins for better handling of breakpoints
  }
}