Novel Personal Mantras

    resass

    1.2.3 • Public • Published

    resass NPM version NPM monthly downloads NPM total downloads Donate

    ##sass media queries mixin

    Getting started

    Install

    Install with npm:

    $ npm install resass

    Install with github:

    $ git clone https://github.com/MatviyRoman/resass.git

    Install with curl:

    $ curl -O https://raw.githubusercontent.com/MatviyRoman/resass/master/mq.scss

    Download

    download

    Usage

    1. Include resass to app:
    @import "resass/r";

    or

    @import "resass/mq";

    Documentation

    Mixins for checking device by width and height (width, min-width, max-width, height, min-height, max-height) or group of devices (mobile, tablet, laptop, desktop) or device by name (iPhone 5, iPhone X, iPhone 11 Pro Max, iPad Pro 12.9, etc). Expandable and very simple for usage.

    Include

    Full include

    Before

    1) @include screen()
    2) @include min-screen()
    3) @include max-screen()
    4) @include height()
    5) @include min-screen-height()
    6) @include max-screen-height()
    7) @include landscape()
    8) @include portrait()

    After

    1) @media only screen and (min-width: width) and (max-width: width)
    2) @media only screen and (min-width: width)
    3) @media only screen and (max-width: width)
    4) @media only screen and (min-height: height) and (max-height: height)
    5) @media only screen and (min-height: height)
    6) @media only screen and (max-height: height)
    7) @media only screen and (orientation: landscape)
    8) @media only screen and (orientation: portrait)

    Short include

    Before

    1) @include s()
    2) @include smin()
    3) @include smax()
    4) @include h()
    5) @include hmin()
    6) @include hmax()
    7) @include l()
    8) @include p()

    After

    1) @media only screen and (min-width: width) and (max-width: width)
    2) @media only screen and (min-width: width)
    3) @media only screen and (max-width: width)
    4) @media only screen and (min-height: height) and (max-height: height)
    5) @media only screen and (min-height: height)
    6) @media only screen and (max-height: height)
    7) @media only screen and (orientation: landscape)
    8) @media only screen and (orientation: portrait)

    Examples:

    It can be used like this:

    scss

    @include screen(min-width, max-width, orientation) {
      /*...*/
    }
    @include s(min-width, max-width, orientation) {
      /*...*/
    }

    Before:

    @include screen(320px, 768px, portrait) {
      /*...*/
    }
    @include s(0, 768px, l) {
      /*...*/
    }

    After:

    @media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) {
      /*...*/
    }
    @media only screen and (max-width: 768px) and (orientation: landscape) {
      /*...*/
    }

    Or like this:

    @include device(iPhone5, portrait) {
      // portrait orientation
      // iPhone 5, iPhone 5s, iPhone 5c, iPhone SE
    }
    @include device(iPhone6Plus iPhoneXR, landscape) {
      // landscape orientation
      // iPhone 6+, iPhone 6s+, iPhone 7+, iPhone 8+, iPhone XR, iPhone 11
    }
    @include device(iPadPro10 iPadPro11 iPadPro12) {
      // all orientations
      // iPad Pro 10.5, iPad Pro 11, iPad Pro 12.9
    }

    Or like this:

    @include device(desktop) {
      // all orientations
      // desktop
    }
    @include device(mobile tablet laptop, landscape) {
      // landscape orientation
      // mobile, tablet, laptop
    }

    Or even like this:

    @include device(mobile-landscape tablet laptop) {
      // landscape orientation
      // mobile
    
      // all orientations
      // tablet, laptop
    }
    @include device(mobile-landscape tablet laptop, portrait) {
      // landscape orientation
      // mobile
    
      // portrait orientation
      // tablet, laptop
    }

    Before

    @include s(325px, 0) {
      /*...*/
    }

    After

    @media only screen and (min-width: 325px) {
      /*...*/
    }

    Before

    Before @include s(0, 325px) {
      /*...*/
    }

    After

    @media only screen and (max-width: 325px) {
      /*...*/
    }

    There are also common mixins:

    @include screen(min-width, max-width, orientation) {
      /*...*/
    }
    @include screen(min-width, max-width, orientation) {
      /*...*/
    }
    @include min-screen(width, orientation) {
      /*...*/
    }
    @include max-screen(width, orientation) {
      /*...*/
    }
    @include screen-height(min-height, max-height, orientation) {
      /*...*/
    }
    @include min-screen-height(height, orientation) {
      /*...*/
    }
    @include max-screen-height(height, orientation) {
      /*...*/
    }

    Orientations:

    @include landscape() {
      /*...*/
    }
    @include portrait() {
      /*...*/
    }

    List of supported devices:

    Groups

    • Mobiles 320-767px mobile mobile-portrait mobile-landscape
    • Tablets 768-1023px tablet tablet-portrait tablet-landscape
    • Laptops 1024-1199px laptop laptop-portrait laptop-landscape
    • Desktop >=1200px desktop desktop-portrait desktop-landscape

    Phones

    • iPhone 5, 5s, 5c, SE iphone5 iphone5s iphone5c iphonese
    • iPhone 6, 6s, 7, 8 iphone6 iphone6s iphone7 iphone8
    • iPhone 6+, 6s+, 7+, 8+ iphone6plus iphone6splus iphone7plus iphone8plus
    • iPhone X, XS, 11 Pro iphonex iphonexs iphone11pro
    • iPhone XR, 11 iphonexr iphone11
    • iPhone XS Max, 11 Pro Max iphonexsmax iphone11promax

    Tablets

    • iPad 1, 2, Mini, Air ipad1 ipad2 ipadmini ipadair
    • iPad 3, 4, Pro 9.7" ipad3 ipad4 ipadpro9
    • iPad Pro 10.5" ipadpro10
    • iPad Pro 11.0" ipadpro11

    Laptops

    • iPad Pro 12.9" ipadpro12

    Well, Yes. iPad Pro 12.9" is a laptop because of its size.


    Expanding the list of devices:

    You can add support for custom devices or group of devices without editing the source. Before @import "resass/mq", you must specify $ms-devices variable with a list of additional devices:

    $ms-devices: (
      desktop-sm: (
        group: true,
        // group of devices
          min: 1200px,
        max: 1919px
      ),
      desktop-md: (
        group: true,
        // group of devices
          min: 1920px,
        max: 2879px
      ),
      desktop-lg: (
        group: true,
        // group of devices
          min: 2880px
      ),
      pixel2xl: (
        group: false,
        // specific device
          width: 411px,
        // or 412px?..
          height: 823px,
        pixel-ratio: 3.5
      ),
      macbook12: (
        group: false,
        // specific device
          orientation: landscape,
        width: 1440px,
        height: 900px,
        pixel-ratio: 2
      ),
      imac27: (
        group: false,
        // specific device
          orientation: landscape,
        width: 5120px,
        height: 2880px
      )
    );

    Demo

    Helpful Links

    Important

    Don't check the adaptability in the browser DevTools, there are incorrectly calculated dimensions of the sides in the landscape orientation of the device. It is better to check on a real device or in a simulator (for example, xCode Simulator).

    Use group-css-media-queries to optimize media queries. Without it, a lot of the same @media ... code is generated, especially if for the sake of convenience to use the mixin @include device() in each selector separately. Wrapper for Gulp - gulp-group-css-media-queries.

    About

    Contributing

    Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

    Relese History

    DATE VERSION CHANGES
    2020-06-20 v1.0.5 Fix error
    2020-06-18 v1.0.4 Add short include
    2020-06-15 v1.0.3 Fix error
    2020-06-10 v1.0.2 Fix error
    2020-06-3 v1.0.1 Fix #fix
    2020-06-1 v1.0.0 upload

    Credits

    Roman Matviy

    License

    Copyright © 2020, Roman Matviy.

    Released under the MIT License.

    Donate

    Buy me a coffee :)

    QR Code

    donation resass media queries

    Or PayPall

    Donate

    Thank You!

    Install

    npm i resass

    DownloadsWeekly Downloads

    12

    Version

    1.2.3

    License

    ISC

    Unpacked Size

    34.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • matviy-pp-ua