Sizing (Web) components

by adding a Trojan horse into your CSS rules.

When using a UI Framework, I think it’s quite important that you can easily customize it. This is especially true for Web Frameworks where there isn’t really a “style guide” like on platforms like iOS or Android.

You use a framework because you don’t want to reinvent the wheel, but you still want to give it a twist to make it your own.

Illustration by Nacho Diaz

So when it comes to changing the size of a component, for example making a Slider bigger for touch input, it might get tedious fiddling with all the widths/heights, border-radi.. etc. So how can we make it easier? Well, by sneaking a Trojan horse into your components and use it to control all the size related CSS properties.

What Trojan horse? Good ol’ font-size, hooked up to EM based units.

Let me show you in an example: For every CSS property that has a direct impact on the component’s size, you use the EM unit.

.Component {

width: 5em;

height: 2em;

border-radius: .5em;

border: 1px solid gold;

}

Note that the border is set to 1px since it should stay always like that, unrelated to size changes.

In some cases you need to override the font-size that comes from the UA style sheet. For example when you use a <button> or <input> element. You can add a font-size of 100%, 1em or inherit to make it inherit from its parent. Or use something like normalize.css which already takes care of that.

.Button {

font-size: 100%;

…

border-radius: .5em;

border: 1px solid gold;

}

With that setup, the resizing can begin. Because EM’s are tightly coupled to the font-size, we now can change all the em units at once by just changing the font-size. This allows you to scale up/down a component and keep all the proportions intact.