wirejs/README.md

WireJS

Bored of imitating the below GIF when trying to perfectly size and align elements with CSS?

Me too, brother.

WireJS allows you to easily "wire" together element alignment properties arbitrarily across the DOM.

Show off

<div id="my-paragraph"></div>
<!-- ... -->
<img class="wired wire-height-#my-paragraph" src="large_image.jpg" />

<script defer src="/wirejs.js"></script>

How it works

.wired

Wired elements are removed from the document flow, making them unable to break layout with their sizing and are checked for wiring directives.

.wire-<what>-<where>

This is a wiring directive. Its fields are unpacked and used for determining how to wire.

• <what> : property to match; valid targets are:

• height
• width

• <where> : CSS selector to determine what element to match; the first result is used

Example

.wire-height-#my-paragraph
 ^^^^ ^^^^^^ ^^^^^^^^^^^^^
   |      |             |
   |      |     look for the element with the id "my-paragraph"
   |      |
   |  match the height
   |
namespacing