friendly-queries v1.0.2

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.