• This repository has been archived on 24/Jun/2023
  • Stars
    star
    324
  • Rank 129,708 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 12 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A declarative responsive web design syntax. Breakpoints, defined in `<meta>`

metaquery

A declarative responsive web design syntax. Breakpoints, defined in <meta> With metaquery, you define your media query breakpoints once, and only once.

(Demo)

โ€” by @benschwarz

Getting Started

Install via Bower bower install metaquery

Otherwise, if you want to grab it manually:

Download the production version (416 bytes) or the development version.

---

  • Define your breakpoints in <meta> tags.
<meta name="breakpoint" content="phone" media="(max-width: 480px)">
<meta name="breakpoint" content="small-tablet" media="(min-width: 480px) and (max-width: 600px)">
<meta name="breakpoint" content="tablet" media="(min-width: 600px) and (max-width: 1024px)">
<meta name="breakpoint" content="widescreen" media="(min-width: 1024px)">
<meta name="breakpoint" content="retina" media="only screen and (-webkit-min-device-pixel-ratio : 2)">
  • metaQuery will add/remove classes to the <html> node (.breakpoint-<name-of-breakpoint>) for you to utilise when the breakpoints are matched. (shorter than media queries. don't repeat yourself)
<style>
  .breakpoint-phone { background: red; }
  .breakpoint-small-tablet { background: green; }
  .breakpoint-tablet { background: blue; }
  .breakpoint-widescreen { background: yellow; }
</style>
  • Responsive images in one simple line.
<img src="./images/phone.jpg" data-mq-src="./images/[breakpoint].jpg">
Modernizr.load([{
  test: ( !!window.matchMedia ),
  nope: ['./js/vendor/matchMedia-oldie.js']
}]);

Adding your own javascript events with metaQuery.onBreakpointChange

Considering the HTML example above, say you wanted watch for 'phone' breakpoint changes:

metaQuery.onBreakpointChange( 'phone', function ( match ) {
  if( match ) { // phawor! your media query matches. }
});

and if you just want to fire an event whenever you switch breakpoints (but don't care which)

metaQuery.onBreakpointChange( function (activeBreakpoints) {
    // do something amazing because you've changed breakpoints!
    // your callback will also be passed an array containing the names of active breakpoints.
});

Browser support

metaQuery requires matchMedia:

Otherwise, metaQuery will work with all common desktop and mobile browsers.

Browserify / CJS

metaQuery can be used with browserify.

Backstory

In 2011/12 I worked on a large HTML magazine that is edited by an editorial team. Each 'module' of a template is responsive, and requires unique styles and sometimes even scripts. After reflecting on the project for some time, what worked and what didn't, I made some simple observations:

  • Writing media queries over and over again sucks. (Even though I use the technique that I illustrated back in December 11')
  • If you want media query access in javascript, you'll create yet another media query with matchMedia
  • picturefill is the best responsive image technique I've seenโ€ฆ until I authored templates for a massive magazine. The syntax is too long and easy to forget.
  • and finally, a summary of all three: a declarative interface is far nicer to use.

After reading both Jeremy Keith and Matt Wilcox's articles, then the source of picturefill I decided to get my hands dirty and have a go at a slightly better approach.

Contributing

Please use idiomatic.js as a styleguide and take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Thanks to

Reviewers: Tim Lucas, Ben Alman, Jeremy Keith, Paul Irish, Divya Manian, David Desandro, Nicolas Gallagher and Mat Marquis

Code:

  • Scott Jehl for writing picturefill, matchMedia.js (with Paul Irish) and respond.js. Legend.
  • Dustin Diaz's teeny dom ready.

License

Copyright (c) 2012 Ben Schwarz Licensed under the MIT license.

More Repositories

1

gallery-css

CSS only Gallery
CSS
1,138
star
2

passenger-stack

Sprinkles for Apache, Passenger, Memcached, Git, Mysql or Postgres
Ruby
315
star
3

bonsai

A tiny static web site generator
Ruby
296
star
4

currency.io

An offline-capable, html5 currency converter app for the iPhone
JavaScript
296
star
5

sublime-bower

Install Bower packages from within Sublime
Python
228
star
6

developers.whatwg.org

Used to create the contents of developers.whatwg.org
198
star
7

amnesia

A Sinatra rack middleware that presents memcached server stats
Ruby
177
star
8

am-grid

Experiemental attribute module grid system
CSS
81
star
9

cache.js

localStorage with timed expiry
JavaScript
55
star
10

smoke

It isn't ready yet
Ruby
47
star
11

bonsai-site

The Bonsai web site source
JavaScript
29
star
12

open-uri-memcached

Ruby's OpenURI with Memcached for caching
Ruby
24
star
13

bom-weather

Weather from the Australian Bureau of Meteorology
Ruby
24
star
14

w3c-spec-styles

An alternate stylesheet for W3C specification pages
JavaScript
23
star
15

heroku-electron-buildpack

Shell
20
star
16

postie

A Sinatra based Rack middleware that provides Australian postcode information via JSON
Ruby
18
star
17

responsive-sass

The source files to a screencast
Ruby
12
star
18

choones

A jQuery plugin to provide monologue style messaging. Inspired by Growl's music video theme.
JavaScript
11
star
19

bower-badges

Show that your project is available in Bower by using a bower badge!
JavaScript
11
star
20

registry

For dirt simple plugin architecture
Ruby
11
star
21

skeet

a heroku ready screen shot application
Ruby
11
star
22

leonardo

A simple ass, half done sparkline graph using Raphael
JavaScript
9
star
23

yahoo-stock

A Yahoo! stocks scraper
Ruby
9
star
24

muxtape-rb

A ruby based gem to download muxtapes
Ruby
9
star
25

grid

A tiny grid system.
Ruby
9
star
26

gifcity

JavaScript
9
star
27

munch

A simple sinatra app to test yahoo pipes to pull down recipes from many web sites
Ruby
9
star
28

transcoder

Transcode from common web based formats into plain old Ruby
Ruby
9
star
29

chrome-request-interception

JavaScript
9
star
30

html5forAuthors

HTML5 (Edition for Web Authors)
JavaScript
8
star
31

rack-smoke

Expose Smoke sources and transcode them into JSON, XML or YAML
Ruby
7
star
32

flickr-rest

A light interface to call flickr 'restful' api methods
Ruby
7
star
33

HTML5.tmbundle

Ruby
7
star
34

flickr-wrapper

A dead project. Here for nostalgia and reference
Ruby
6
star
35

homebrew-sassc

Ruby
6
star
36

Hillegass-Macruby

Cocoa Programming for Mac OS X examples rewritten for MacRuby
Ruby
5
star
37

watch

A simple directory watcher
Ruby
4
star
38

ae

A rack middleware to allow for accessibility on any page.
4
star
39

gitnotify

Enables a post-commit hook to your repositories that sends growl notifications around your local network
Ruby
4
star
40

benschwarz-site-v2

My *new* web site
Ruby
3
star
41

railscamp-13

JavaScript
3
star
42

attr-chain

attr_chain for chainable, single method attribute (get|setters)
Ruby
2
star
43

openuri_recorder

Its like a VCR for the web that you can take on the plane with you
Ruby
2
star
44

benschwarz

2
star
45

smoke-manual

A book about smoke, the ruby dsl
Ruby
2
star
46

html5-workshop-site

The web site from which I'll release details about my HTML5 workshop
JavaScript
1
star
47

dotjs

My ~/.js extensions
JavaScript
1
star