Enquire.js w/ Foundation breakpoint classes

breakpoints.coffee

# Breakpoint class
# provides a way to manage and access breakpoint values for use in media queries
# read in more detail about this at https://medium.com/@caleb.pierce/coffeescript-for-responsive-websites-3398abd5e2bd

class Breakpoint
  constructor: (@lower_bound, @upper_bound = "") ->
    @screen = "only screen"

  # returns a min-width style media query breakpoint
  up: ->
    result = @screen

    if @lower_bound != "0em"
      result += " and (min-width:#{@lower_bound})"

    return result

  # returns a min-width and max-width style media query breakpoint
  only: ->
    result = @screen

    if @lower_bound != "0em"
      result += " and (min-width:#{@lower_bound})"

    if @upper_bound != ""
      result += " and (max-width:#{@upper_bound})"
		
    return result

# instantiate all the Foundation breakpoints
mq =
  small: new Breakpoint("0em", "40em")
  medium: new Breakpoint("40.063em", "64em")
  large: new Breakpoint("64.063em", "90em")
  xlarge: new Breakpoint("90.063em", "120em")
  xxlarge: new Breakpoint("120.063em")


# then, whenever you need to listen for breakpoints...

enquire.register mq.medium.up(), {
  match : ->
    # prepare desktop-size components

  unmatch : ->
    # prepare mobile-size components
}