This document describes the sizing system and how components are using it.
Components use em for sizing.
This allows us to create components that scale well (by themselves or from parent components) using the font-size property and CSS cascade and inheritance.
When developing components use a pixel size first and then convert them to em using the 16px as the base. For example a 1px border becomes 0.0625em (1/16 = 0.0625), which then scales correctly.
<div style="font-size: 16px"> <div style="font-size: 2em">"I am twice as big!"</div></div>
Somethimes there is a need to change the font size and this changes all the ems which calculated for that element. In this case we need to calculate the changed font size as the base.
For example if we want to have a 10px padding on an element which has a font size of 14px, then the calculation will be: 10/14 = 0.7142
<div style="font-size: 16px"> <div style="font-size: 0.875em;border: 0.07142em solid gray;padding: 0.7142em;" >"My font-size is 14px, but my padding is 10px."</div></div>
Most components implement a size
property which takes a Ui.Size
enum.
It has three options:
Ui.Size.Em(Number)
- Sets the size to given number as em.Ui.Size.Px(Number)
- Sets the size to given number as pixel.Ui.Size.Inherit
- Sets the size so it's inherited from the parent element.You can use this enum to set the size of a component (the default is usually Ui.Size.Inherit
).
You can use font-size: #{Ui.Size.toString(size)};
function in your components base style to set the size.
<div style="font-size: 12px;"> <Ui.Container> <Ui.Button label="12px"/> <Ui.Button size={Ui.Size.Inherit} label="12px"/> <Ui.Button size={Ui.Size.Px(20)} label="20px"/> <Ui.Button size={Ui.Size.Px(24)} label="24px"/> </Ui.Container></div>
Mint UI is a design system and component library for building websites, web and desktop applications.