Friendly queries

Human-friendly media queries for Sass.

IMPORTANT NOTICE: this project is deprecated and unmaintained. I no longer think that this simplifies working with media queries since it only adds an unnecessary abstraction layer.

Overview

A set of mixins that attempts to make working with media queries a bit easier by using memorable names to define them.

Installation

Install it using npm:

npm install friendly-queries

Usage

1. Basic usage:

selector {
  property: value;

  @include viewport-above(small) {
    property: value;
  }
}

Output:

selector {
  property: value;
}

@media (min-width: 48em) {
  selector {
    property: value;
  }
}

2. Modify the direction:

selector {
  property: value;

  @include device-below(large, vertical) {
    property: value;
  }
}

Output:

selector {
  property: value;
}

@media (min-device-height: 64em) {
  selector {
    property: value;
  }
}

3. Nesting:

selector {
  property: value;

  @include viewport-above(small) {
    property: value;

    @include orientation(portrait) {
      property: value;
    }
  }
}

Output:

selector {
  property: value;
}

@media (min-width: 48em) {
  selector {
    property: value;
  }
}

@media (min-width: 48em) and (orientation: portrait) {
  selector {
    property: value;
  }
}

You can see it in action on the test page.

Available mixins

• density-above()
• density-below()
• density-between()
• device-above()
• device-below()
• device-between()
• orientation()
• print()
• viewport-above()
• viewport-below()
• viewport-between()

Conditions

Define the different conditions for the media queries inside the $friendly-queries map.

Contributing

Contributions are welcome! Please, read the contribution guidelines first.

License

Released under the MIT license.