Nadie Programa más

    @curiousmedia/breakpoint

    2.0.0 • Public • Published

    Breakpoint

    Unified Javascript and SCSS breakpoint manager.

    Installation

    npm install @curiousmedia/breakpoint

    Dart Sass

    The Dart Sass implementation is highly recommend and used for all examples unless specified otherwise.

    @use '@curiousmedia/breakpoint/src/breakpoint' with (
      $breakpoints: (
        md: "@media (hover: hover)"
      )
    );
    
    @include breakpoint.any('md') {
      .button {
        &:hover {
          color: red;
        }
      }
    }

    LibSass & Ruby Sass

    @import '@curiousmedia/breakpoint/src/breakpoint';
    
    $breakpoints: (
      md: "@media (hover: hover)"
    );
    
    @include breakpointAny('md') {
      .button {
        &:hover {
          color: red;
        }
      }
    }

    Usage

    CSS

    Breakpoint presets need to be configured by setting the "breakpoints" SCSS variable.

    $breakpoints: (
        landscape: "@media (orientation: landscape)",
        touch: "@media screen and (pointer: coarse)",
        cursor: "@media screen and (pointer: fine)",
        hover: "@media screen and (hover: hover)",
        still: "@media screen and (prefers-reduced-motion)",
        sm: "@media (max-width: 640px)",
        md: "@media (min-width: 641px) and (max-width: 1024px)",
        lg: "@media (min-width: 1025px)",
        grid: "@supports (display: grid)",
        page: "@page"
    );

    Presents can be referenced for quick, unified breakpoints across an entire project. Unfortunately, CSS and Javascript breakpoints must be defined separately.

    Single breakpoint

    Create "md" breakpoint.

    @include breakpoint.any(md) {
        div {
            font-size: 2em;
        }
    }

    Multiple breakpoints using any

    Create breakpoint where sm or lg conditions are met.

    @include breakpoint.any(sm, lg) {
        div {
            font-size: 2em;
        }
    }

    Multiple breakpoints using all

    Create breakpoint where landscape and sm conditions are met. If all queries use the same rule (e.g. @media), then they will be merged into a single breakpoint. However, if multiple queries do not use the same rule, they will be nested.

    @include breakpoint.all(landscape, sm) {
        div {
            font-size: 2em;
        }
    }

    Custom Breakpoints

    Custom breakpoints can be used along side presets.

    @include breakpoint.all(sm, '@media (min-width: 400px)') {
        div {
            font-size: 2em;
        }
    }

    Nested

    Create nested breakpoints.

    div {
      @include breakpoint.any(hover) {
        @include breakpoint.any(landscape, sm) {
          font-size: 2em;
        }
      
        @include breakpoint.all(md, grid) {
          font-size: 3em;
        }
      }
    }

    Short hand

    Create single-property breakpoint.

    div {
      @include breakpoint.prop('font-size', (lg: 1em, md: 2em));
    }

    Javascript

    Breakpoint presets are configured when class is instantiated.

    Configuration

    let bp = new Breakpoint({
        'landscape': '@media (orientation: landscape)',
        'touch': '@media screen and (pointer: coarse)',
        'cursor': '@media screen and (pointer: fine)',
        'hover': '@media screen and (hover: hover)',
        'still': '@media screen and (prefers-reduced-motion)',
        'sm': '@media (max-width: 640px)',
        'md': '@media (min-width: 641px) and (max-width: 1024px)',
        'lg': '@media (min-width: 1025px)',
        'grid': '@supports (display: grid)',
        'page': "@page"
    });

    Single breakpoint

    Query "md" breakpoint.

    bp.any('md'); //returns true or false

    Multiple breakpoints using any

    Query to evaluate if "sm" or "lg" conditions are met.

    bp.any('sm', 'lg'); //returns true or false

    Multiple breakpoints using all

    Query to evaluate if "landscape" and "sm" conditions are met.

    bp.all('landscape', 'md'); //returns true or false

    Custom Breakpoints

    Custom breakpoints can be used along side presets.

    bp.all('sm', '@media (min-width: 400px)'); //returns true or false

    Notes

    Complex queries

    This library is designed to handle common media queries. Complex queries with many conditions and not operators have not been tested.

    Supported rules

    The @page, @media, and @supports rules are supported. Due to the nature of SCSS syntax, additional rules will have to be manually added.

    @page

    The @page rule will always return true in the Javascript implementation; Javascript isn't computed on printed pages.

    Keywords

    none

    Install

    npm i @curiousmedia/breakpoint

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    25.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • cm-gregory
    • kyfoote
    • curiousjason
    • eaglstun
    • ishoa