Система размеров

В SIMAI Framework для установки любых размеров используется набор из CSS переменных.

Описание

Для обозначения размеров используется система размеров SIMAI Framework. С помощью нее задаются все размеры, имеющие абсолютное значение.

В качестве основной единицы измерения используется rem. Это позволяет создавать интерфейс, который адаптируется к используемым шрифтам. Для удобства восприятия ниже будут приводиться примеры в пикселях исходя из значения по умолчанию 1 rem = 16 пикселей.

Система размеров представляет собой набор размеров, состоящий из 9 групп по 10 значений. Сами группы обозначаются строчными буквами латинского алфавита (от a до i). Значения обозначаются цифрами. Например, a0, b4, h9.

Размеры в системе задаются по определенному алгоритму.

В первой (a) и второй (b) группе размеры задаются с интервалом 1 пиксель (1/16rem): a0=0, a1=1px (1/16rem), a9=9px (9/16rem), b1=10px (10/16rem), b9=19px (19/16rem).

Начиная со третьей группы (c), значение элемента каждой последующей группы больше в 2 раза. Так, например, с2 - 24px(24/16rem) больше b2 - 12px (12/16rem) в 2 раза, а d2 - 48px (48/16rem) больше с2 - 24px(24/16rem) также в 2 раза.

Нулевой и пиксельный размер

Для удобства, нулевый и пиксельный размер также имеют отдельные переменные.

CSS переменная	Значение
`--sf-0`	`0rem`
`--sf-px`	`1px`

Группы размеров

Ниже приведены группы размеров. Все значения в пикселях даны для простоты восприятия при 1 rem равном 16px.

Группа A

В данной группе шаг изменения размера составляет 0.0625rem (1 px).

Название	CSS переменная	Значение, rem	Значение, px
a0	`--sf-a0`	`0rem`	`0px`
a1	`--sf-a1`	`0.0625rem`	`1px`
a2	`--sf-a2`	`0.125rem`	`2px`
a3	`--sf-a3`	`0.1875rem`	`3px`
a4	`--sf-a4`	`0.25rem`	`4px`
a5	`--sf-a5`	`0.3125rem`	`5px`
a6	`--sf-a6`	`0.375rem`	`6px`
a7	`--sf-a7`	`0.4375rem`	`7px`
a8	`--sf-a8`	`0.5rem`	`8px`
a9	`--sf-a9`	`0.5625rem`	`9px`

a0

a1

a2

a3

a4

a5

a6

a7

a8

a9

Группа B

В данной группе шаг изменения размера составляет 0.0625rem (1 px).

Название	CSS переменная	Значение, rem	Значение, px
b0	`--sf-b0`	`0.625rem`	`10px`
b1	`--sf-b1`	`0.6875rem`	`11px`
b2	`--sf-b2`	`0.75rem`	`12px`
b3	`--sf-b3`	`0.8125rem`	`13px`
b4	`--sf-b4`	`0.875rem`	`14px`
b5	`--sf-b5`	`0.9375rem`	`15px`
b6	`--sf-b6`	`1rem`	`16px`
b7	`--sf-b7`	`1.0625rem`	`17px`
b8	`--sf-b8`	`1.125rem`	`18px`
b9	`--sf-b9`	`1.1875rem`	`19px`

b0

b1

b2

b3

b4

b5

b6

b7

b8

b9

Группа C

В данной группе шаг изменения размера составляет 0.125rem (2 px).

Название	CSS переменная	Значение, rem	Значение, px
c0	`--sf-c0`	`1.25rem`	`20px`
c1	`--sf-c1`	`1.375rem`	`22px`
c2	`--sf-c2`	`1.5rem`	`24px`
c3	`--sf-c3`	`1.625rem`	`26px`
c4	`--sf-c4`	`1.75rem`	`28px`
c5	`--sf-c5`	`1.875rem`	`30px`
c6	`--sf-c6`	`2rem`	`32px`
c7	`--sf-c7`	`2.125rem`	`34px`
c8	`--sf-c8`	`2.25rem`	`36px`
c9	`--sf-c9`	`2.375rem`	`38px`

c0

c1

c2

c3

c4

c5

c6

c7

c8

c9

Группа D

В данной группе шаг изменения размера составляет 0.25rem (4 px).

Название	CSS переменная	Значение, rem	Значение, px
d0	`--sf-d0`	`2.5rem`	`40px`
d1	`--sf-d1`	`2.75rem`	`44px`
d2	`--sf-d2`	`3rem`	`48px`
d3	`--sf-d3`	`3.25rem`	`52px`
d4	`--sf-d4`	`3.5rem`	`56px`
d5	`--sf-d5`	`3.75rem`	`60px`
d6	`--sf-d6`	`4rem`	`64px`
d7	`--sf-d7`	`4.25rem`	`68px`
d8	`--sf-d8`	`4.5rem`	`72px`
d9	`--sf-d9`	`4.75rem`	`76px`

d0

d1

d2

d3

d4

d5

d6

d7

d8

d9

Группа E

В данной группе шаг изменения размера составляет 0.5rem (8 px).

Название	CSS переменная	Значение, rem	Значение, px
e0	`--sf-e0`	`5rem`	`80px`
e1	`--sf-e1`	`5.5rem`	`88px`
e2	`--sf-e2`	`6rem`	`96px`
e3	`--sf-e3`	`6.5rem`	`104px`
e4	`--sf-e4`	`7rem`	`112px`
e5	`--sf-e5`	`7.5rem`	`120px`
e6	`--sf-e6`	`8rem`	`128px`
e7	`--sf-e7`	`8.5rem`	`136px`
e8	`--sf-e8`	`9rem`	`144px`
e9	`--sf-e9`	`9.5rem`	`152px`

e0

e1

e2

e3

e4

e5

e6

e7

e8

e9

Группа F

В данной группе шаг изменения размера составляет 1rem (16 px).

Название	CSS переменная	Значение, rem	Значение, px
f0	`--sf-f0`	`10rem`	`160px`
f1	`--sf-f1`	`11rem`	`176px`
f2	`--sf-f2`	`12rem`	`192px`
f3	`--sf-f3`	`13rem`	`208px`
f4	`--sf-f4`	`14rem`	`224px`
f5	`--sf-f5`	`15rem`	`240px`
f6	`--sf-f6`	`16rem`	`256px`
f7	`--sf-f7`	`17rem`	`272px`
f8	`--sf-f8`	`18rem`	`288px`
f9	`--sf-f9`	`19rem`	`304px`

f0

f1

f2

f3

f4

f5

f6

f7

f8

f9

Группа G

В данной группе шаг изменения размера составляет 2rem (32 px).

Название	CSS переменная	Значение, rem	Значение, px
g0	`--sf-g0`	`20rem`	`320px`
g1	`--sf-g1`	`22rem`	`352px`
g2	`--sf-g2`	`24rem`	`384px`
g3	`--sf-g3`	`26rem`	`416px`
g4	`--sf-g4`	`28rem`	`448px`
g5	`--sf-g5`	`30rem`	`480px`
g6	`--sf-g6`	`32rem`	`512px`
g7	`--sf-g7`	`34rem`	`544px`
g8	`--sf-g8`	`36rem`	`576px`
g9	`--sf-g9`	`38rem`	`608px`

g0

g1

g2

g3

g4

g5

g6

g7

g8

g9

Группа H

В данной группе шаг изменения размера составляет 4rem (64 px).

Название	CSS переменная	Значение, rem	Значение, px
h0	`--sf-h0`	`40rem`	`640px`
h1	`--sf-h1`	`44rem`	`704px`
h2	`--sf-h2`	`48rem`	`768px`
h3	`--sf-h3`	`52rem`	`832px`
h4	`--sf-h4`	`56rem`	`896px`
h5	`--sf-h5`	`60rem`	`960px`
h6	`--sf-h6`	`64rem`	`1024px`
h7	`--sf-h7`	`68rem`	`1088px`
h8	`--sf-h8`	`72rem`	`1152px`
h9	`--sf-h9`	`76rem`	`1216px`

h0

h1

h2

h3

h4

h5

h6

h7

h8

h9

Группа I

В данной группе шаг изменения размера составляет 8rem (128 px).

Название	CSS переменная	Значение, rem	Значение, px
i0	`--sf-i0`	`80rem`	`1280px`
i1	`--sf-i1`	`88rem`	`1408px`
i2	`--sf-i2`	`96rem`	`1536px`
i3	`--sf-i3`	`104rem`	`1664px`
i4	`--sf-i4`	`112rem`	`1792px`
i5	`--sf-i5`	`120rem`	`1920px`
i6	`--sf-i6`	`128rem`	`2048px`
i7	`--sf-i7`	`136rem`	`2176px`
i8	`--sf-i8`	`144rem`	`2304px`
i9	`--sf-i9`	`152rem`	`2432px`

i0

i1

i2

i3

i4

i5

i6

i7

i8

i9

Изменить статью