lunch-breakpoints 🍕

💻 📲 Simple and lightweight implementation to run javascript on viewport breakpoints

What

Define functions that run once when viewport enters the breakpoints

new LunchBreakpoints({
  default: function() {
    // any width larger than 1024
  },
  breakpoints: {
    1024: function(){
      // smaller than 1024 and bigger than 768  
    },
    768: function() {
      // smaller than 768
    }
  }
});

Instalation

Whichever you prefer:

<script src="lunch-breakpoints.js"></script>

var LunchBreakpoints = window.returnExports;

---

npm install --save-dev lunch-breakpoints

var LunchBreakpoints = require('lunch-breakpoints');

import LunchBreakpoints from 'lunch-breakpoints';

Usage

Instantiate with new:

new LunchBreakpoints(options);

where options...

parameter

description

options

Type: Object Default: { mobileFirst: false, throttle: false } default Type: Function This is the function to be executed when no breakpoint is matched breakpoints Type: Object Example: { 1100: function() { // code here} } Properties as breakpoints that must be functions mobileFirst Type: Boolean Default: false Whether or not to calculate the width ascendingly or descendingly, (mobile first responsive approach vs desktop first) throttle Type: Boolean || Number Default: false Leave false if you don't wish the resize events to be throttled, or provide a number (in ms) at which to throttle the event

---

Lunch Breakpoints because lunch break and breakpoints