equ

equalizer

Equalizer - A simple way to keep elements with equal height!

Showing:

Popularity

Downloads/wk

62

GitHub Stars

20

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Equalizer

npm version bower version dependencies devDependencies

Dependency free package to keep HTML elements with equal height!

Preinstall - maybe you should use flexbox?

Hey, maybe you even don't need any extra package to control this behaviour. If you can you should use flexbox, just add this css...

section {
    display: flex;
}

Tada! All blocks inside section should have equal height.

Install

Using bower

bower install equalizer

Using npm

npm install equalizer

What is Equalizer?

Equalizer is small JavaScript file. Sometimes you need to keep some block with equal height, e.g all divs in row. Equalizer gets maximum height and set it to all blocks as min-height property.

Before equalize: before equalize

After: before equalize

How to use

Import directly in HTML through <script> tag

After import equalizer directly in HTML it will expose in global variable named Equalizer

<script src="/path/to/script/equalizer.min.js"></script>
<script>
    var eq = new Equalizer('.row .align');
    eq.align();

    // or

    var blocks = document.querySelectorAll('.row .align');
    var eq2 = new Equalizer(blocks);
    eq2.align();
</script>

CommonJS (node style), e.g. using browserify

var Equalizer = require('equalizer');
var eq = new Equalizer('.row .align');

eq.align();

RequireJS (AMD)

requirejs(['equalizer'], function(Equalizer) {
    var blocks = new Equalizer('.row .align');
    blocks.align();
});

Simple alignment

Equalizer('.row .align').align();

License

The MIT License. Copyright © 2014 - 2016 Szymon Krajewski.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100