<commit_before># metaquery [![Build Status](https://secure.travis-ci.org/benschwarz/metaquery.png?branch=master)](http://travis-ci.org/benschwarz/metaquery)

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

([Demo](http://benschwarz.github.com/metaquery/images.html), [Demo](http://benschwarz.github.com/metaquery/css-classes.html))

— by [@benschwarz](http://twitter.com/benschwarz)

## Getting Started

Install via Bower `bower install metaquery`

Otherwise, if you want to grab it manually:

Download the [production version][min] (1779 bytes) or the [development version][max].

The smaller (968 bytes!), lighter jQuery powered edition:

* [production jQuery version][minjq]
* [development jQuery version][maxjq]

[min]: https://raw.github.com/benschwarz/metaquery/master/metaquery.min.js
[max]: https://raw.github.com/benschwarz/metaquery/master/metaquery.js
[minjq]: https://raw.github.com/benschwarz/metaquery/master/metaquery.jquery.min.js
[maxjq]: https://raw.github.com/benschwarz/metaquery/master/metaquery.jquery.js

---

* Define your breakpoints in `<meta>` tags.

``` html
<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)

``` html
<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.

``` html
<img src="./images/phone.jpg" data-mq-src="./images/[breakpoint].jpg">
```

* Add modernizr to detect support for matchMedia, then use either the official [matchMedia.js][matchMedia.js] polyfill, or [my version that'll also work for IE7 & 8][matchmedia-oldie]

``` javascript
Modernizr.load([{
  test: ( !!window.matchMedia ),
  nope: ['./js/vendor/matchMedia-oldie.js']
}]);
```

## Adding your own javascript events with metaQuery.bind

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

``` javascript<commit_msg>Old reference to bind method<commit_after># metaquery [![Build Status](https://secure.travis-ci.org/benschwarz/metaquery.png?branch=master)](http://travis-ci.org/benschwarz/metaquery)

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

([Demo](http://benschwarz.github.com/metaquery/images.html), [Demo](http://benschwarz.github.com/metaquery/css-classes.html))

— by [@benschwarz](http://twitter.com/benschwarz)

## Getting Started

Install via Bower `bower install metaquery`

Otherwise, if you want to grab it manually:

Download the [production version][min] (1779 bytes) or the [development version][max].

The smaller (968 bytes!), lighter jQuery powered edition:

* [production jQuery version][minjq]
* [development jQuery version][maxjq]

[min]: https://raw.github.com/benschwarz/metaquery/master/metaquery.min.js
[max]: https://raw.github.com/benschwarz/metaquery/master/metaquery.js
[minjq]: https://raw.github.com/benschwarz/metaquery/master/metaquery.jquery.min.js
[maxjq]: https://raw.github.com/benschwarz/metaquery/master/metaquery.jquery.js

---

* Define your breakpoints in `<meta>` tags.

``` html
<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)

``` html
<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.

``` html
<img src="./images/phone.jpg" data-mq-src="./images/[breakpoint].jpg">
```

* Add modernizr to detect support for matchMedia, then use either the official [matchMedia.js][matchMedia.js] polyfill, or [my version that'll also work for IE7 & 8][matchmedia-oldie]

``` javascript
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:

``` javascript
{'fraction_non_alphanumeric': 0.15462563332707824, 'fraction_numerical': 0.01125914805779696, 'mean_word_length': 5.375598086124402, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2158355', 'n_tokens_mistral': 1803, 'n_tokens_neox': 1668, 'n_words': 442}