MetaQuery, A declarative responsive breakpoint syntax. Defined in [HTML, CSS] (github.com)

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

README.md

A declarative breakpoint syntax. Defined in <meta> (Demo, Demo)

— by @benschwarz

Getting Started

Download the production version or the development version.

In your markup:

<!doctype html>
<html>
  <head>
    <meta name="breakpoint" data="phone" media="(max-width: 480px)">
    <meta name="breakpoint" data="small-tablet" media="(min-width: 480px) and (max-width: 600px)">
    <meta name="breakpoint" data="tablet" media="(min-width: 600px) and (max-width: 1024px)">
    <meta name="breakpoint" data="widescreen" media="(min-width: 1024px)">
    <meta name="breakpoint" data="retina" media="only screen and (-webkit-min-device-pixel-ratio : 2)">

    <script src="./js/vendor/modernizr.js"></script>

    <style>
      .breakpoint-phone { background: red; }
      .breakpoint-small-tablet { background: green; }
      .breakpoint-tablet { background: blue; }
      .breakpoint-widescreen { background: yellow; }
    </style>
  </head>
  <body>
    <img src="./images/phone.jpg" data-mq-src="./images/[breakpoint].jpg">
  </body>
  <script>
    Modernizr.load([
      {
        test: (!!window.matchMedia),
        nope: ['./js/vendor/matchMedia-oldie.js']
      },
      {
        load: './js/metaquery.js'
      }
    ]);
  </script>
</html>

Now you’ll have access to the breakpoints that you’ve defined in three places:

  • Via the CSS classes .breakpoint-<name-of-breakpoint> (shorter than media queries, no repeating yourself)
  • Via responsive image tags (use the declarative interface for defining a convention, then build with that)
  • Bind additional events in Javascript with metaQuery.bind

metaQuery requires matchMedia support:

Otherwise, go for your life in Chrome, Safari, Firefox and New IE.

How do I know if my browser supports matchMedia?

Open a developer console, type window.matchMedia, if you get undefined, you’ll need a polyfill for that browser.

Adding your own javascript events

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

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

Backstory

I recently 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.

Internally, metaQuery uses a resize event handler, you may be thinking, “but wait — not all media queries are related to device width”, While this is true. metaQuery will still execute onLoad, and when additional events are bound. For me, this is enough, disagree? Please add an issue.

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.

Release History

  • 0.0.1 – Initial. Baller. Edition.

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.
  • Nico Wiedemann (EarMaster) for his add/remove/hasClass implementation //github.com/EarMaster/CSSClass
  • Dustin Diaz’s teeny dom ready.

License

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

via Hacker News 20 https://github.com/benschwarz/metaquery

Advertisements

Leave a comment

Filed under Auto

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s