montagejs/digit — pull request #13 by simurai (2013-07-01 08:48:09+00:00)
Title: Easy sizing

Added a new feature so that you can change the size of all components with just the `font-size` property. It use `em`s for everything else that is size related. It also works for components that don't really have text in them.. like the `Slider`, `Radio`, `Checkbox`.

Default (16px)
![16px](https://f.cloud.github.com/assets/378023/729012/5b2a5e9e-e225-11e2-9153-6ba3cb46e721.png)

```css
.digit-NumberField {
font-size:12px;
}
```
![12px](https://f.cloud.github.com/assets/378023/729020/9d9f746c-e225-11e2-9923-46ce42075d55.png)

```css
.digit-NumberField {
font-size: 24px;
}
```
![24px](https://f.cloud.github.com/assets/378023/729024/a68fba14-e225-11e2-92ad-68d3a10e78c0.png)

## Benefits
* Super easy and quick.. no fiddling with width/heights. It even cascades down to a components sub components.
* It keeps all proportions intact
* If you need to, you still can change width/height as usual.
* You can override them on a global level with `.digit-NumberField {...}` or just in a single case `.my-NumberField {...}`
* Since they all have the same base size (16px), it's easy to change the size in bulk. For example all the components inside a header.
* Great for setting the size programmatically. For example a user could increase them in the settings.

## Issues
* It could have some rounding errors so that it's off by 1px. Not a big problem with larger sizes, but you might see it when going really small.
* It might not be that easy to map (in your head) the font-size to the width/height of a component. For example the `Badge` has a font-size of 16px which translates to 30px in width/height. So if you need a specific size you need to calculate it or just try it out.
* The `Slider` uses `calc()` which is not supported by every browser.. but most of our targeted ones should be fine. See [Can I use](http://caniuse.com/#search=calc)

ps. Since it's something new, I haven't tested this in the wild, but I think we can give it a try and see if people like it.