#element-calcum Examples

Documentation can be found [here](https://github.com/yuvilio/element-calcum), including the code for these [examples](https://github.com/yuvilio/element-calcum/blob/master/examples).

## Ex. 1: Width

Simple example Getting familiar with grids. Here is a simple bootstrap grid with different layouts for small, medium, and large. Let's use element-calcum to probe the css widths (we'll use element-size as a convenience to calculate them). __Resize the browser width to see a recalc__.

## Ex. 2: Recalculating off of other events (like a range slider input)

Since you control the calculation made on the the element, it can be whatever you want to explore. Here's an example exploring the flexbox proportions and this time measuring height. Let's also demonstrate manual adjustment by throwing in a range slider with a 'change' listener to adjust the height and have element-calcum recalculate the approximate heights. You might have to double adjust the slider to see the new calculation.

## Ex. 3: Multiple calcs on the same elements

Simply run as many calculations on the elements. Each will generate it's own data attribute. You can then concatenate them in the css content for one label. Here's an example with flexbox wrapping :

## Ex. 4: Ratios

A lot of implementing a responsive layout per some design is maintaining alignments and ratios (width/height, ...) for various viewport widths. Here is an example of a bootstrap grid calculating width/height ratios revealing a background image going out of the ratio intended (say 2/1 for width to height). We know that as we resize, the ratios are adjusted and we should fix it when they are. This can be handy however you choose to solve the problem

## Ex. 5a: Offset (position)

Offsets, can help see if things are aligned. Here's a pair of rows that align at small breakpoint but whose second columns mis-align in medium breakpoint. The offset calculation is presented as (top, left)

##. Ex 5b: Relative offsets:

With slight adjustment we can see offsets relative to their parent.

Want to use the element inspector to adjust the style and see the change? Have a look at [element-calcum-style](https://github.com/yuvilio/element-calcum-style)