https://github.com/skrajewski/equalizer

Equalizer - A simple way to keep elements with equal height!
https://github.com/skrajewski/equalizer

Last synced: 14 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/skrajewski/equalizer
• Owner: skrajewski
• License: mit
• Created: 2014-10-12T17:01:02.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-05-20T22:19:03.000Z (over 8 years ago)
• Last Synced: 2024-10-12T18:21:17.237Z (about 1 month ago)
• Language: HTML
• Homepage:
• Size: 12.7 KB
• Stars: 20
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Equalizer

===========================

![npm version](https://img.shields.io/npm/v/equalizer.svg)

![bower version](https://img.shields.io/bower/v/equalizer.svg)

![dependencies](https://img.shields.io/david/skrajewski/equalizer.svg)

![devDependencies](https://img.shields.io/david/dev/skrajewski/equalizer.svg)

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

```css

section {

    display: flex;

}

```

Tada! All blocks inside section should have equal height.

* [Check flexbox in caniuse.com](http://caniuse.com/#feat=flexbox)

* [See example in my test directory](https://github.com/skrajewski/Equalizer/blob/master/test/test_flexbox.html)

## 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](http://i.imgur.com/4NWL6Sk.png, "Blocks before equalize")

After:

![before equalize](http://i.imgur.com/lq7EUcd.png, "Blocks after equalize")

## How to use

### Import directly in HTML through `` tag

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

```html

<script src="/path/to/script/equalizer.min.js">

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

    eq.align();

    // or

    var blocks = document.querySelectorAll('.row .align');

    var eq2 = new Equalizer(blocks);

    eq2.align();

```

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

```javascript

var Equalizer = require('equalizer');

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

eq.align();

```

### *RequireJS* (AMD)

```javascript

requirejs(['equalizer'], function(Equalizer) {

    var blocks = new Equalizer('.row .align');

    blocks.align();

});

```

### Simple alignment

```javascript

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

```

## License

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