Displaying 1 to 15 from 15 results

react-sizeme - Make your React Components aware of their width and height!

  •    Javascript

Give 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.

eq.js - Lightweight JavaScript powered element queries

  •    Javascript

Element queries are the "holy grail" of responsive web design, allowing you to create a single component that can be dropped into any position in any layout and have them respond appropriately. Unfortunately, due to some hard-to-deal-with chicken-and-egg cases, especially involving inline elements, it's unlikely that element queries will make it into browsers any time soon. In order to use eq.js, you need to include eq.js on your site. Setting up element queries can be done in one of two ways: the first is to set up a data-eq-pts attribute on your desired element and the second is to use the eq-pts mixin in Sass. The first way is preferred, as it is faster for JavaScript to parse and can fire on DOMContentLoaded whereas the second way is slower and can only be fired on window load, increasing the likelihood of a flash of unstyled content.

cq-prolyfill - Prolyfill for CSS Container Queries

  •    Javascript

This 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.

eqio - A simple, tiny alternative to element/container queries

  •    Javascript

eqio allows you to attain the holy grail of responsive web development/design systems: components that can adapt their styling based on their width, not the browser‘s. It uses IntersectionObservers under-the-hood (so is well supported in “good” browsers and easily polyfilled in others) to apply appropriately named classes to the component when necessary.




react-element-queries - 🐣🐷 Conditionally render pieces of UI based on element queries.

  •    Javascript

React component designed to let you conditionally render pieces of UI based on a set of element (media) queries defined by you.Each property contains an object with one or more expressions.

borealis - Element query based responsive image solution

  •    Javascript

By the end of 2013, the average web page served 1,030Kb of images, much to the chagrin of low bandwidth and pay-per-kilobyte users. The need to serve smaller images where appropriate, and to be able to control the scale and crop of images at all sizes, is imperative to creating a light weight and editorially rich web experiences. This is where responsive images come in. Unfortunately, we don't have a standard solution yet, and of those proposed, images will be swapped based on viewport information, not element information. Until we have a standard solution, you've got to pick your favorite hack. In order to use borealis, you need to both include borealis.js on your site and set up the data-borealis-srcs attribute on your desired image. data-borealis-srcs needs to be written in key: value pairs separated by a comma ,, with the key being the min-width pixel width when you would like to swap out an image and the value being the URL to the image. The first item in data-borealis-srcs should not have a key and will be the default. In order to prevent extra image requests, do not include the src attribute in the image definition.

ember-element-query - Element queries for Ember

  •    HTML

This 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.


qss - QSS ➸ a simple query syntax for CSS element queries

  •    HTML

The goal of QSS is to define a simple syntax for specifying element queries by adding a new ending part between a CSS selector list and the block of rules that help define the breakpoints when those rules are to apply. We are going to add a new part for our query between the selector list and the block where we will store instructions for when the rule should apply.

reprocss - A flexible <style>-tag based CSS reprocessor

  •    HTML

If you are using reproCSS with custom events, you may also optionally use a selector attribute specify a list of one or more CSS selectors you would like to add event listeners for. If no selector attribute is found all custom events will be applied to window.

slinky - Add JavaScript tests to <link> tags to toggle stylesheets

  •    HTML

Similar to how you can add media queries to <link> tags with the media="" attribute, Slinky lets you define a custom data-selector="" and data-test="" attributes to any <link> tag to define an element to watch, and a JavaScript test to evaluate from the context of the matching element. Note that in these examples I've included media="none" so the stylesheets default to being hidden - for progressive enhancement if you wish to default to the stylesheets applying unless they need to be hidden by JS, you can leave the media="none" off and the stylesheet will load by default, instead of remain hidden by default.

remeasure - Get position and size attributes for any React Component

  •    Javascript

The bottom, left, right, and top properties are what you would expect from the result of element.getBoundingClientRect(). naturalHeight and naturalWidth are properties that are native to img elements, and for all non-img elements they are coalesced with scrollHeight and scrollWidth, respectively. These properties are retrieved on mount, but will also automatically update if the element is resized thanks to ResizeObserver. Please note that elements that do not support content (such as img) are not supported by this resize listener because there is no content box to observe. If you need to support those elements, simply create a higher-order component that wraps that element in a div and decorate that component.