media-query-mixins

    3.1.0 • Public • Published

    media-query-mixins

    NOW WITH JAVASCRIPT BREAKPOINTS (see below)

    Extremely lightweight, very basic mixin set for responsive MOBILE FIRST SCSS and Stylus development. Currently, there are the following breakpoints:

    • sm: 568px
    • md: 768px
    • lg: 1024px
    • xl: 1280px

    And orientations:

    • portrait
    • landscape

    Future functionalities:

    • Configurable breakpoints
    • Parametric breakpoints
    • ...

    To use it, @import the _mixin.scss or _mixin.styl file and just call as regular mixins without parameters

    SCSS
    .responsive {
      @include landscape {
          width: 50%;
      }
      @include protrait {
          width: 100%;
      }
      @include sm {
        width: 50%;
      }
    }
    Stylus
    .responsive
      +landscape()
        width50%;
      
      +protrait()
          width100%;
      
      +sm()
        width50%;

    Will compile to

    @media (orientation: landscape) {
      .responsive {
        width: 50%;
      }
    }
    @media (orientation: portrait) {
      .responsive {
        width: 100%;
      }
    }
    @media (min-width: 568px) {
      .responsive {
        width: 50%;
      }
    }
    JAVASCRIPT

    Import media-query-mixins/_mixins.js Every function breakpoint accepts a function and parameters to be passed to it. It returns an object with { result: "result of the callback", match: "Breakpoint Name (sm, md, lg, xl)" } OR null if doesnt match That way you can fallback the callbacks from max to min

    xl(txt => `it's all fine, ${txt}`, 'xl') || 
    lg(txt => `it's all fine, ${txt}`, 'lg') || 
    md(txt => `it's all fine, ${txt}`, 'md') || 
    sm(txt => `it's all fine, ${txt}`, 'sm') || 
    min(txt => `it's all fine, ${txt}`, 'min')

    This would return { result: "it's all fine, md", match: 'md' } for medium screens

    There are methods for desktop first aproach, where instead of testing min-width of the screen, it tests the max width. The fallback method calling would look like:

    rSm(txt => `it's all fine, ${txt}`, 'sm') ||
    rMd(txt => `it's all fine, ${txt}`, 'md') || 
    rLg(txt => `it's all fine, ${txt}`, 'xl') || 
    rXl(txt => `it's all fine, ${txt}`, 'xl') || 
    max(txt => `it's all fine, ${txt}`, 'max')

    Install

    npm i media-query-mixins

    DownloadsWeekly Downloads

    55

    Version

    3.1.0

    License

    ISC

    Unpacked Size

    8.34 kB

    Total Files

    5

    Last publish

    Collaborators

    • pedrotorchio