# WireJS

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

![Peter Griffin CSS](documentation/css_peter.gif)

Me too, brother.

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


## Show off

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

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

![rendered example](documentation/___)


## 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
```