Sizing

This document describes the sizing system and how components are using it.

Default Size

The default size of the :root is 16px on desktop and 14px on mobile.

Sizing Components

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.

I am twice as big!
<div style="font-size: 16px">
<div style="font-size: 2em">"I am twice as big!"</div>
</div>
Different Font Size

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

My font-size is 14px, but my padding is 10px.
<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>
Ui.Size

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

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.