RELATIVENESS

Since the JTB_MD's layout idea has built on the flex system; the relative powers of the elements inside the flex system is really important for the library. There are two different ways to define the children's relative powers in JTB_MD for flex system: Percentage System and Multiplication System.

Percentage system

Percantage system is basicly a system that you define the power percentages of the items inside the flex container.
As an example; if you want to create a flex box with 2 children; which have 25% vs 75% relative widths; you can define their classes with ._25 and ._75. The most important point of this way is calculating the sum of percentages. If it exceeds or falls short of 100%; then the exact widths of the children won't be the exact numbers of the flex box.

The 'Percentage Classes' table for the children of flex container follows:

Occupies % of
flex container
All screens Extra small screens only Small screens only Medium screens only Large screens only
05% _05 _05_xs _05_sm _05_md _05_lg
10% _10 _10_xs _10_sm _10_md _10_lg
15% _15 _15_xs _15_sm _15_md _15_lg
20% _20 _20_xs _20_sm _20_md _20_lg
25% _25 _25_xs _25_sm _25_md _25_lg
30% _30 _30_xs _30_sm _30_md _30_lg
35% _35 _35_xs _35_sm _35_md _35_lg
40% _40 _40_xs _40_sm _40_md _40_lg
45% _45 _45_xs _45_sm _45_md _45_lg
50% _50 _50_xs _50_sm _50_md _50_lg
55% _55 _55_xs _55_sm _55_md _55_lg
60% _60 _60_xs _60_sm _60_md _60_lg
65% _65 _65_xs _65_sm _65_md _65_lg
70% _70 _70_xs _70_sm _70_md _70_lg
75% _75 _75_xs _75_sm _75_md _75_lg
80% _80 _80_xs _80_sm _80_md _80_lg
85% _85 _85_xs _85_sm _85_md _85_lg
90% _90 _90_xs _90_sm _90_md _90_lg
95% _95 _95_xs _95_sm _95_md _95_lg

Multiplication system

Multiplication system is basicly a system that you define the powers of the items inside the flex container with basing on one root item. For example; if you want to create a flex box with 2 children, which have X and 2X widths relatively; you just use ._x1 for 'X' one and ._x2 for '2X' one. On this methnod, the most important point is selecting the base item. Because all other items will be distributed basing on their powers relative to the one.

The 'Multiplication Powers' table for the children of flex container follows:

Area All screens Extra small screens only Small screens only Medium screens only Large screens only
Not flexible _x0 _x0_xs _x0_sm _x0_md _x0_lg
Base item _x1 _x1_xs _x1_sm _x1_md _x1_lg
2x bigger _x2 _x2_xs _x2_sm _x2_md _x2_lg
3x bigger _x3 _x3_xs _x3_sm _x3_md _x3_lg
4x bigger _x4 _x4_xs _x4_sm _x4_md _x4_lg
5x bigger _x5 _x5_xs _x5_sm _x5_md _x5_lg
6x bigger _x6 _x6_xs _x6_sm _x6_md _x6_lg
7x bigger _x7 _x7_xs _x7_sm _x7_md _x7_lg
8x bigger _x8 _x8_xs _x8_sm _x8_md _x8_lg
9x bigger _x9 _x9_xs _x9_sm _x9_md _x9_lg
10x bigger _x10 _x10_xs _x10_sm _x10_md _x10_lg
11x bigger _x11 _x11_xs _x11_sm _x11_md _x11_lg
12x bigger _x12 _x12_xs _x12_sm _x12_md _x12_lg