Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+). It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported) size while not causing performance lags due to event based implementation. It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.
css media-query element-query responsiveGive your Components the ability to have render logic based on their height and/or width. Responsive design on the Component level. This allows you to create highly reusable components that can adapt to wherever they are rendered. The following configuration options are available. Please see the usage docs for how to pass these configuration values into either the component or higher order function.
react react-component element-queries element-query utility libraryThis is a prolyfill for a special version of container queries (aka element queries). You can read more about the idea and how they work internally in this article. For more information take a look at the usage documentation.
css container-queries element-queries rwd container-query element-query prolyfill prollyfill polyfill browser postcss postcss-pluginLike Media Queries - Set min and max values like breakpoints. Use the Bounds in JS - Active bounds are passed down as props.
react react-tool element-query media-query modular-componentsOnce you start thinking in components, media queries, which are reliant on the size of the whole screen, don't work well because components are frequently not the full screen-width. Element queries solve this, but CSS won't have element queries for a while. eq.js does a good job, but it doesn't play nicely with React. Besides which, using the React render pipeline has some nice performance and API benefits.
css element-query reactThis Ember addon lets you apply styles to elements conditionally based on their own width, instead of using media queries based on window width. It lets you implement reusable responsive components — with encapsulated styles, decoupled from their parent context. Such components will realign their content depending on how much space is available to them.
ember-addon element-queries element-query e-q responsive-web-design responsive rwd eq ember sass scss slice slices breakpoint-slicer media-query media-queriesPolyfill to make it easy to listen for element resize events
event resize element-query element-queriesAccepts an array of key-value pairs which will be your query. It uses React Measure under the hood to detect component changes and pass down matchedQueries, matchedProps, and dimensions into your component. Each object in the queries array requires at least two properties: name and breakpoint.
react component react-component query container-query element-query responsive
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.