## Box Model

The component that animates most of the CSS box model properties of a target element on all browsers.

### Overview

Animate the width, height, borderWidth or spacing for a target element on all browsers.

The KUTE.js Box Model component provides support for all box-model properties and all their variations.

Unlike other components, this one only works with px measurement unit, simply because these properties have no control at subpixel level. This means that even if you use % as suffix, the computed values are still pixel based in all browsers.

Because modern browsers shine with transform animations and box model properties generally come with performance penalties and other animation jank, they can be used as fallback for legacy browsers, for your very special clients of course.

### Box Model Properties

- `left`, `top`, `right` and `bottom` are `position` based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses `position: absolute/relative` styling as well as it's parent element requires `position:relative`. These properties can be used as fallback for browsers with no support for `translate` properties such as IE8.
- `width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight` are properties that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for `scale` on IE8 again, as well as for other purposes.
- `padding`, `margin`, `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`, `marginTop`, `marginBottom`, `marginLeft` and `marginRight` are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin).
- `borderWidth`, `borderTopWidth`, `borderRightWidth`, `borderBottomWidth` are `borderLeftWidth` are properties that allow you to animate the border of an element either on all sides at once or each side separatelly.
- `outlineWidth` property allows you to animate the `outline-width` of an element.

The properties marked with different color, namely `left`, `top`, `width` and `height` are part of a lighter version of the component called baseBoxModel.js, since they're the most used and probably most needed in just about every KUTE.js distribution.

### Examples

OK let's have a look at some sample tween objects and a quick demo:

    let tween1 = KUTE.to('selector1',{width:200})
    let tween2 = KUTE.to('selector1',{height:300})
    let tween3 = KUTE.to('selector1',{left:250})
    let tween4 = KUTE.to('selector1',{top:100})
    let tween5 = KUTE.to('selector1',{marginTop:200})
    let tween6 = KUTE.to('selector1',{marginBottom:50})
    let tween7 = KUTE.to('selector1',{padding:30})
    let tween8 = KUTE.to('selector1',{margin:'5px'})

We're gonna chain these tweens and start the animation.

BOX
MODEL
Start

### Notes

- Shorthand notations such as `margin: "20px 50px"` or any other property are not supported.
- Most box-model properties (except `top`, `left`, `bottom` and `right`) are layout modifiers and will not produce the best visual experience mainly because they force re-paint on all page layout and they don't support animation under the pixel level.
- The baseBoxModel component is featured in all distributions, while the full component is bundled with demo/src/kute-extra.js file.