Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Enquire.js w/ Foundation breakpoint classes
# 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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment