Стили для мам

Хелперы

Отступы

Модификаторы для внешних отступов m{type}-{breakpoint}{value} и для внутренних отступов p{type}-{breakpoint}{value}

Типы {type}
все{m|p}a-
вертикальные{m|p}v-
горизонтальные{m|p}h-
левый{m|p}l-
верхний{m|p}t-
правый{m|p}r-
нижний{m|p}b-
Брейкпоинты {breakpoint}
0—599pxxs
600—959pxsm
960–1263pxmd
≥1264pxlg
Значения {value}
0
4
8
16
24
48
Пример
test

Overflows

.of-hidden
.of-hidden-x
.of-hidden-y
.of-auto
.of-auto-x
.of-auto-y

Floats

.float-none
.float-left
.float-right

Бордеры

Радиусы

Формула .br-{breakpoint}{radius}

Брейкпоинты {breakpoint}
0—599pxxs
600—959pxsm
960–1263pxmd
≥1264pxlg
Радиусы {radius}
0
4
6
8
16
Цвета

не реализованно

Видимость

hidden-{xs|sm|md|lg}-only или hidden-{sm|md}-{and-up|and-down}

xs-only

sm-only

md-only

lg-only

sm-and-up

md-and-up

sm-and-down

md-and-down

Прозрачность

Формула: op-{xs|sm|md|lg}{percent}. Шаг для значения percent — 5

.op-xs0
.op-xs5
.op-xs10
.op-xs15
.op-xs20
.op-xs25
.op-xs30
.op-xs35
.op-xs40
.op-xs45
.op-xs50
.op-xs55
.op-xs60
.op-xs65
.op-xs70
.op-xs75
.op-xs80
.op-xs85
.op-xs90
.op-xs95
.op-xs100

Объект брейкпоинта

Брейкпоинты можно использовать программно с помощью объекта vm.$layout.breakpoint

СвойствоТипОписание
nameStringназвание брейкпоинта "xs|sm|md|lg"
xsBooleanэкран < 600
smBoolean600 ≤ экран < 960
mdBoolean960 ≤ экран < 1280 - 16
lgBooleanэкран ≤ 1280 - 16
xsOnlyBooleanочень маленький экран
smOnlyBooleanмаленький экран
smAndDowntrue/falseмаленький экран и меньше
smAndUpBooleanмаленький экран и больше
mdOnlyBooleanсредний экран
mdAndDownBooleanсредний экран и меньше
mdAndUpBooleanсредний экран и больше
lgOnlyBooleanбольшой экран
widthNumberтекущая ширина окна
heightNumberтекущая высота окна

Текст

Позиционирование
.text-{xs|sm|md|lg}-left
.text-{xs|sm|md|lg}-center
.text-{xs|sm|md|lg}-right
Размер
12px.ts-{xs|sm|md|lg}-12
14px.ts-{xs|sm|md|lg}-14
16px.ts-{xs|sm|md|lg}-16
18px.ts-{xs|sm|md|lg}-18
24px.ts-{xs|sm|md|lg}-24
Толщина
100.tw-{xs|sm|md|lg}-thin
300.tw-{xs|sm|md|lg}-light
400.tw-{xs|sm|md|lg}-regular
500.tw-{xs|sm|md|lg}-medium
700.tw-{xs|sm|md|lg}-bold
900.tw-{xs|sm|md|lg}-black