stowball / eqio Goto Github PK
View Code? Open in Web Editor NEWA simple, tiny alternative to element/container queries
Home Page: https://codepen.io/stowball/pen/zPYzWd
License: MIT License
A simple, tiny alternative to element/container queries
Home Page: https://codepen.io/stowball/pen/zPYzWd
License: MIT License
I have something like this:
<div class='prl-interface eqio' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>
And have CSS classes like these:
.prl-eqio-\<961\.98, .prl-eqio-\<1169\.98, .prl-eqio-\>962
etc
this does work fine when resizing the browser window so if I end up resizing to width 1000px I get:
<div class='prl-interface eqio prl-eqio->546 prl-eqio->738 prl-eqio-<1169.98 prl-eqio->962' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>
But if I resize using a Script or CSS where let's say I add a right margin of 230px to a 1230px width container to get the same 1000px I get:
<div class='prl-interface eqio prl-eqio-<1169.98' data-eqio-sizes='["<545.98", "<737.98", "<961.98", "<1169.98", ">546", ">738", ">962", ">1170"]' data-eqio-prefix='prl'>
So most of the classes are not added and I lose the styles I could've added on the prl-eqio->962
class for example.
The worst part is that as it could add prl-eqio-<1169.98, it could add prl-eqio->962 instead, making it totally random and unpredictable.
What can I do in this case to fix it?
thanks in advance.
Hi Matt,
I really like the simple approach to have something like container/element queries. While trying to adapt your approach to an Angular directive I realized that the trigger elements (.eqio__trigger
) generate a horizontal scrollbar when the width doesn't fit into viewport anymore. As this element may only be visually hidden to make the IntersectionObserver working, the whole idea seems to be limited to some use cases.
Did you use eqio yourself in mobile first projects to build components that self adapt to their parents width?
Thanks,
Markus
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.