form5-alignment v1.0.0

form5-alignment is a collection of alignment helper functions dependent on jQuery. Only 3KB of minified Javascript.

How to fetch form5-alignment?

Install with Bower: bower install form5-alignment

Clone the Github project: git clone https://github.com/Form5/form5-alignment.git

Or download zip.

Then what?

Please note that this is a very rough documentation, so until we complete it we encourage you to check out the source code and the demo at the bottom of this page.

Getting started

After installation simply load the file along with other scripts, no further initialization is necessary. Remember that this script requires jQuery, meaning jQuery should already be loaded before this script. We recommend using the latest stable release.

Attach the appropriate attribute to an element the function should be applied to, like so e.g.

<div vertical-center>...</div>

All options (as of v1.0) only take integers as a value, and are of course optional. Desired options should be included within the attribute as JSON, like so e.g.

<div vertical-center ="{above: 568, below: 1023}">...</div>

above and below reference the window's width, meaning it should work above and/or below a width predefined by yourself. (try out the demo)

Available functions

---

[full-window-height] <div full-window-height>...</div>

Will set the min-height of the element to window.height(). The value can be proportionally modified by the multiply option, e.g. multiply: 0.5 will return half of the window.height().

Available options: {above: integer, below: integer, multiply: integer}

---

Equalize

This function will go through all [equalize] elements within [equalize-wrap], find the largest one, and set it as a fixed height on all of the elements in this group.

[equalize-wrap] <div equalize-wrap>...</div>

Available options: {above: integer, below: integer}

Should be applied to, well, the wrap element. This is required to allow multiple sets of 'equalized' elements on same page.

---

[equalize] <div equalize>...</div>

Should be applied to all elements, within the previously mentioned equalize-wrap, this function should affect.

---

[vertical-center] <div vertical-center>...</div>

Will center the element vertically within it's parent.

Available options: {above: integer, below: integer}

---

What about debugging?

For debugging you can run this after the functions have been included.

window.form5.alignment.debug = true;

This will return each element affected by these functions and all options related to each one.

---

Demo time!

Check out this demo (try resizing the window) to get a better understanding of how this awesomeness works. For demonstration purposes it is set to only work above 568px and below 1023px (view-source for demo).

Want more?

You could go all in and customize the script directly. The original can be found in src/form5-alignment.js. To compile a minified/uglified version of your new script you can build it again by running:

$ npm install

$ grunt build

If you would like to extend the core functionality of this script in a way that could benefit others, don't hesitate to create a pull request!

Author

Written by Form5.

Contributors

Benedikt D Valdez, developer at Form5.

Ólafur Nielsen, co-founder at Form5.

Árni Reynir Óskarsson, developer at Form5.