An X-Tag Web Component that provides Element Query capabilities
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
Gruntfile.js
README.md
bower.json
package.json
xtag.json

README.md

X-QUERYBOX - An Element Query Web Component

How to use X-QUERYBOX

  1. Add the X-Tag Web Components library to your page
  2. Add the main.js amd main.css files located in /src to your page
  3. Start having hyper-responsive, element query fun!

Example Markup:

  <x-querybox media="query(small-width, (max-width: 300px))">

    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

  </x-querybox>

Example CSS:

  x-querybox[matched-media~="small-width"] {
    font-size: 50%; /* small text for a wee lil element! */
  }

Adding mediachange Event Listeners:

  document.querySelector('x-querybox').addEventListener('mediachange', function(e){
    if (e.detail.indexOf('small-width') > -1) {
      // the 'small-width' query is active, do some smally-widthy stuff!
    }
  });