Why Equalize Layouts?if youre tired of media queries cluttering up css files like { @media (max-width: 600px) {} }, then
equalizers are here to save the day. they help keep your layout responsive w/o sacrificing readability or maintainability.
How Does It Work?equalizer. js is a lightweight javascript library that simplifies column-based layouts using css grid under-the-hood but works seamlessly w/ existing html and minimal js changes.
<div class="container">Column A<!-- More columns here --><script src="/path/to/equalizers. min. js"></script><body onload='equalize(". container")'></body>
Why Choose Equalizer?-
Flexibility - works with any layout, not just grid.
<aside>Aside</aside>Main Content<footer>© 20XX Your Company Inc.</footer>`<script src="/path/to/equalizers. min. js"></script><body onload='equalize(". main-content")'></body>- **Performance ** - Tiny file size and fast execution.
javascript
// just one line of js to load all equalized elements on page!
document. addeventlistener('domcontentloaded', () =
> {const eq = new equalizer('. container');
});
`
Don't Let Grid Confuse Yougrid is great, but sometimes you just want a simpler solution. with equalizers, your layout stays clean and easy-to-read while still being fully responsive.
Say goodbye to messy media queries.