1 #00sizes Sizes

Use em sizes in your components, if you want to make them resisable.

Use px sizes, whereever applicable

Never use rem size on Windy. Our goal is increase readability and mainatainibility of code by limiting usage of virtual, hardly to debug size metrics.

Source: src/css/core/sizes.less, line 1

1.1 #00sizes.00 .size-{size}

Just shorthand for font-size: with predefined reccomended sizes. Use following classes to size your elements, which increase readability and maintainilibility of your code.

Whenever possible use our size- class in code to increase mainatainibility and readability of your code

Following size classes are also used to set size of our CSS components.

Examples

Default styling

Button:

"This is very long text written in: "

.size-xxs

8px

Button: size-xxs

"This is very long text written in: size-xxs"

.size-xs

10px

Button: size-xs

"This is very long text written in: size-xs"

.size-s

12px

Button: size-s

"This is very long text written in: size-s"

.size-m

14px (default body size)

Button: size-m

"This is very long text written in: size-m"

.size-l

16px

Button: size-l

"This is very long text written in: size-l"

.size-xl

18px

Button: size-xl

"This is very long text written in: size-xl"

.size-xxl

20px

Button: size-xxl

"This is very long text written in: size-xxl"

.size-xxxl

24px

Button: size-xxxl

"This is very long text written in: size-xxxl"

.size-ultra

40px

Button: size-ultra

"This is very long text written in: size-ultra"

Markup

    <div class="btn bg-orange fg-white [modifier class]">Button: [modifier class]</div>
    <br style="clear: both"/><div class="[modifier class]">"This is very long text written in: [modifier class]"</div>

Source: src/css/core/sizes.less, line 14

1.2 #00sizes.01 Size variables

Various variables for sizing

Parameters:

@size-xxs

8px size
@size-xs

10px size
@size-s

12px size
@size-m

14px size
@size-l

16px size
@size-xl

18px size
@size-xxl

20px size
@size-xxxl

24px size
@size-xxxxl

30px size
@size-ultra

40px size

Source: src/css/core/sizes.less, line 77

1.3 #00sizes.02 Other variables

Various variables used in overall Windy UI

Parameters:

@headerH

Heigth of mobile header @mmHeight- Height of mobile menu
@rhBottomW

Width of desktop's rh bottom container
@tdWidth

Width of table item in detail
@heightOfDetailTableDaysRow

Height of first rof of detail's table

Source: src/css/core/sizes.less, line 107