sass-media-breakpoints

    0.0.6 • Public • Published

    SASS Media breakpoints

    A lightweight set of sass mixins for media queries written to make you more productive and make your media queries more readable.

    Installation

    • Install sass-media-breakpoints using npm

      npm install sass-media-breakpoints

    Advantage

    • Easy to use and makes you more productive by not writing lesser code
    • Since sass is compiled, only mixins that you use will be converted to the final css

    Dev

    If you want to contribute and add more commonly used mixing, do the following

    • clone the repo git clone https://github.com/vijayranghar/sass-media-breakpoints.git
    • make changes to the scss files inside assets or index.scss
    • run npm run compile

    Use

    • Import sass-media-breakpoints at the beginning of your stylesheet

      @import "./node_modules/sass-media-breakpoints/assets/index";

    • The module contains a list of easy to use mixins that can be used by incluing them using the @include command.

      example

      @include desptop {
        .foo {
          font-size: 20px;
        }
      }
      

      will generate

      @media (min-width: 992px)  {
        .foo {
          font-size: 20px;
        }
      }
      

    Following is the list of available mixins

    • desktop
    @include desptop {}
    
    @media (min-width: 992px) {}
    
    • tablet
    @include tablet {}
    
    @media (max-width: 991px) {}
    
    • tablet-only
    @include tablet {}
    
    @media (min-width: 768px) and (max-width: 991px) {}
    
    • phone
    @include tablet {}
    
    @media (max-width: 767px) {}
    
    • mediaquery
    options required
    min-width yes
    max-width yes
    orientation no
    ratio no

    min and max width

    @include mediaquery (200, 500) {}
    
    @media (min-device-width: 200px) 
      and (max-device-width: 500px) {
      }
    

    min, max width and orientation

    @include mediaquery (200, 500, portrait) {}
    
    @media (min-device-width: 200px) 
      and (max-device-width: 500px)
      and (orientation: $orientation) {
      }
    

    min, max width and ratio

    @include mediaquery (200, 500, null, 1) {}
    
    @media (min-device-width: 200px) 
      and (max-device-width: 500px)
      and (-webkit-min-device-pixel-ratio: $ratio)
      and (-moz-device-pixel-ratio: $ratio) {
      }
    

    min, max width, orientation and ratio

    @include mediaquery (200, 500, portrait, 1) {}
    
    @media (min-device-width: 200px) 
      and (max-device-width: 500px)
      and (-webkit-min-device-pixel-ratio: $ratio)
      and (orientation: $orientation)
      and (-moz-device-pixel-ratio: $ratio) {
      }
    
    • mq-screen This mixin is exactly the same as mediaquery but adds only screen to all the media queries

      so, for example

      @include mq-screen (200, 500) {}
      
      @media only screen
        and (min-device-width: 200px) 
        and (max-device-width: 500px) {
      }
      

      and so on

      NOTE Although we do not recommend using devide specific media queries, but there are situations when you need to use them.

      Following are a list of all device specific media queries

      Each mixin can be either used without any param or with a single param to set the orientation which can be either landscape or portrait

      example Use

      @inclue iphone-5 {}

      @inclue iphone-5(landscape) {}

      @inclue iphone-5(portrait) {}

    • google-pixel

    • google-pixel(landscape | portrait)

    • google-pixel-xl

    • google-pixel-xl-(landscape | portrait)

    • htc-one

    • htc-one(landscape | portrait)

    • iphone-4

    • iphone-4(landscape | portrait)

    • iphone-4s

    • iphone-4s(landscape | portrait)

    • iphone-5

    • iphone-5(landscape | portrait)

    • iphone-5s

    • iphone-5s(landscape | portrait)

    • iphone-5c

    • iphone-5c(landscape | portrait)

    • iphone-5se

    • iphone-5se(landscape | portrait)

    • iphone-6

    • iphone-6(landscape | portrait)

    • iphone-6s

    • iphone-6s(landscape | portrait)

    • iphone-6-plus

    • iphone-6-plus(landscape | portrait)

    • iphone-7

    • iphone-7(landscape | portrait)

    • iphone-7-plus

    • iphone-7-plus(landscape | portrait)

    • iphone-8

    • iphone-8(landscape | portrait)

    • iphone-8-plus

    • iphone-8-plus(landscape | portrait)

    • iphone-x

    • iphone-x(landscape | portrait)

    • galaxy-s3

    • galaxy-s3(landscape | portrait)

    • galaxy-s4

    • galaxy-s4(landscape | portrait)

    • galaxy-s5

    • galaxy-s5(landscape | portrait)

    • galaxy-note3

    • galaxy-note3(landscape | portrait)

    • galaxy-s6

    • galaxy-s6(landscape | portrait)

    • windows

    • windows(landscape | portrait)

    • ipad-1

    • ipad-1(landscape | portrait)

    • ipad-2

    • ipad-2(landscape | portrait)

    • ipad-mini

    • ipad-mini(landscape | portrait)

    • ipad-air

    • ipad-air(landscape | portrait)

    • ipad-3

    • ipad-3(landscape | portrait)

    • ipad-4

    • ipad-4(landscape | portrait)

    • ipad-pro-97

    • ipad-pro-97(landscape | portrait)

    • ipad-pro-105

    • ipad-pro-105(landscape | portrait)

    • ipad-pro-129

    • ipad-pro-129(landscape | portrait)

    • kindle-fire-hd-7

    • kindle-fire-hd-7(landscape | portrait)

    • kindle-fire-hd-89

    • kindle-fire-hd-89(landscape | portrait)

    • nexus-7

    • nexus-7(landscape | portrait)

    • nexus-9

    • nexus-9(landscape | portrait)

    • samsung-tab-2

    • samsung-tab-2(landscape | portrait)

    • samsung-tab-s

    • samsung-tab-s(landscape | portrait)

    • apple-watch

    • moto-360

    • laptop-non-retina

    • laptop-retina

    • Chris Coyier has documented breakpoints for all these devices really well here

    Install

    npm i sass-media-breakpoints

    DownloadsWeekly Downloads

    1

    Version

    0.0.6

    License

    MIT

    Last publish

    Collaborators

    • nerdchacha
    • vijayranghar