<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed text-right">Animate the <b>width</b>, <b>height</b>, <b>borderWidth</b> or spacing for a target element on all browsers.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>Box Model</b> component provides support for all box-model properties and all their variations.</p>
<p>Unlike other components, this one only works with <b>px</b> measurement unit, simply because these properties have no control at subpixel level. This means that even if you use <b>%</b>
as suffix, the computed values are still pixel based in all browsers.</p>
<p>Because modern browsers shine with <b>transform</b> 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.</p>
<li><kbdclass="bg-blue">left</kbd>, <kbdclass="bg-blue">top</kbd>, <kbdclass="bg-olive">right</kbd> and <kbdclass="bg-olive">bottom</kbd> are <code>position</code> based properties for movement on
vertical and / or horizontal axis. These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires
<code>position:relative</code>. These properties can be used as fallback for browsers with no support for <code>translate</code> properties such as IE8.</li>
<kbdclass="bg-olive">maxHeight</kbd> 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
<code>scale</code> on IE8 again, as well as for other purposes.</li>
<kbdclass="bg-olive">paddingRight</kbd>, <kbdclass="bg-olive">marginTop</kbd>, <kbdclass="bg-olive">marginBottom</kbd>, <kbdclass="bg-olive">marginLeft</kbd> and
<kbdclass="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin).</li>
<li><kbdclass="bg-olive">borderWidth</kbd>, <kbdclass="bg-olive">borderTopWidth</kbd>, <kbdclass="bg-olive">borderRightWidth</kbd>, <kbdclass="bg-olive">borderBottomWidth</kbd> are
<kbdclass="bg-olive">borderLeftWidth</kbd> are properties that allow you to animate the border of an element either on all sides at once or each side separatelly.</li>
<li><kbdclass="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
</ul>
<p>The properties marked with different color, namely <kbdclass="bg-blue">left</kbd>, <kbdclass="bg-blue">top</kbd>, <kbdclass="bg-blue">width</kbd> and <kbdclass="bg-blue">height</kbd> are part of a lighter
version of the component called <i>baseBoxModel.js</i>, since they're the most used and probably most needed in just about every KUTE.js distribution.</p>
<h3>Examples</h3>
<p>OK let's have a look at some sample tween objects and a quick demo:</p>
<li>Shorthand notations such as <code>margin: "20px 50px"</code> or any other property are not supported.</li>
<li>Most box-model properties (except <code>top</code>, <code>left</code>, <code>bottom</code> and <code>right</code>) 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.</li>
<li>The <i>baseBoxModel</i> component is featured in all distributions, while the full component is bundled with <i>demo/src/kute-extra.js</i> file.</li>