meteor-template-breakpoints

Reactive template media breakpoints.

Package provides Template.mediaQueryBreakpoints reactive variable which contains hash { screensize: breakpoint }. breakpoint is minimum viewport width value in px for a given screensize. Defaults to Foundation breakpoints.

  {
    small: 0, 
    medium: 640, 
    large: 1200, 
    xlarge: 1440, 
    xxlarge: 1920
  }

Set your own breakpoints (must be inside Meteor.startup callback):

  Meteor.startup(function(){
    // Bootstrap breakpoints
    Template.mediaQueryBreakpoints.set({
      xs: 0,
      sm: 480,
      md: 768,
      lg: 992,
      xl: 1200
    })
  })

Install

meteor add sunstory:meteor-template-breakpoints

Use

screensize Template helper:

  {{#if screensize 'small'}}
    <p>If screensize less then 640px...</p>
  {{else}}
    <p>Otherwise...</p>
  {{/if}}

  {{#unless screensize 'large, xlarge'}}
    ...
  {{/unless}}

screensize Session variable:

  if (Session.equals('screensize', 'xlarge')){
    ...
  } else {
    ...
  }

Important: Session.equals only compares with single screensize.

Changelog

• 26 Sep 2015: Template helper now optionally accepts string with multiple screensizes, e.g.: 'large, xlarge'.