stylus-mq

    3.0.0 • Public • Published

    Stylus - Media Queries

    stylus-mq is a simple mixin to ease the use of media queries in stylus. A lot of inspiration to this library was gathered from sass-mq.

    Installation

    With NPM

    npm install stylus-mq
    

    Manual installation can be done by downloading mq.styl to your project.

    Basic example

    stylus-mq will allow you to write this:

    @import 'mq.styl';
     
    $mq-breakpoints = {
      small768px
    };
     
    .className {
      background-colorwhite;
     
      +mq($until'small') {
        background-colorred;
      }
    }

    and generate this:

    .className {
      background-color: white;
    }
     
    @media (max-width: 48em) {
      .className {
        background-color: red;
      }
    }

    Options

    $mq-breakpoints

    Allows you to override the default named breakpoints.

    Example:

    $mq-breakpoints = {
      mobile: 768px,
      tablet: 1024px,
      desktop: 1280px
    };

    Default settings:

    $mq-breakpoints ?= {
      tiny: 480px,
      small768px,
      medium992px,
      large1200px
    };

    $mq-responsive

    Allows you to create a separate stylesheet for older browsers that don't support media queries.

    Example:

    $mq-responsive = false;

    Default settings:

    $mq-responsive ?= true;

    $mq-static-breakpoint

    Breakpoint to be used if $mq-responsive is set to false.

    Example:

    $mq-static-breakpoint = 'mobile';

    Default settings:

    $mq-static-breakpoint ?= 'desktop';

    $mq-base-font-size

    Base font size to calculate media queries from.

    Example:

    $mq-base-font-size = 14px;

    Default settings:

    $mq-base-font-size ?= 16px;

    Parameters

    mq() takes up to three optional parameters:

    • $from: inclusive min-width boundary
    • $until: exclusive max-width boundary
    • $and: additional custom directives

    Breakpoints as JSON data

    To enable using the same breakpoint names and widths in both Stylus and JavaScript the breakpoint data can be converted to JSON.

    Example:

    body {
      &:after {
        displaynone;
        contentmq-breakpoints-to-json();
      }
    }

    Results:

    body:after {
      display: none;
      content: '{ "tiny": "30em", "small": "48em", "medium": "62em", "large": "75em" }';
    }

    This can be read and parsed with something like this:

    var removeQuotes = function (string) {
      return string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, '');
    };
     
    var getBreakpoints = function () {
      var breakpoints = window
        .getComputedStyle(document.body, ':after')
        .getPropertyValue('content');
     
      return JSON.parse(removeQuotes(breakpoints));
    };

    Adding custom breakpoints

    $mq-breakpoints = mq-add-breakpoint('tvscreen'1920px);
     
    .hide-on-tv {
      +mq('tvscreen') {
        displaynone;
      }
    }

    Testing

    Install dependencies.

    npm install
    

    Run tests.

    npm test
    

    Install

    npm i stylus-mq

    DownloadsWeekly Downloads

    2

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • marcuslilja