Skip to content

A library agnostic bit of code that enables element queries for hyper-responsive layouts and UI

Notifications You must be signed in to change notification settings

csuwildcat/element-queries

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Element Queries

How to use Element Queries

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

Example Markup:

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

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

  </section>

Example CSS:

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

About

A library agnostic bit of code that enables element queries for hyper-responsive layouts and UI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published