Spacing
С чего начать
Классы интервалов используют синтаксисp-propertyposition-value, тогда как для адаптивных значений используется форматp-propertyposition-breakpoint-value.
Property
Свойство может быть либо margin, либо padding.
- m: margin
- p: padding
Position
Позиции доступны для отдельных сторон, осей x-y или заполнения всех сторон.
- t: top
- b: bottom
- l: left
- r: right
- x: left and right
- y: top and bottom
- blank: all sides
Value
Поле значения варьируется от 0 до 6, где значение $spacer по умолчанию равно 1 rem. Специальное значение auto доступно только для полей и используется для центрирования элементов.
- 0: $spacer * 0
- 1: $spacer * .25
- 2: $spacer * .5
- 3: $spacer * 1
- 4: $spacer * 1.5
- 5: $spacer * 2
- 6: $spacer * 3
- auto: auto margin
Breakpoint
Брейкпоинты определяют, как следует определять интервалы в зависимости от размера экрана. Используется подход mobile-first, поэтому меньшие значения могут также применяться к большим значениям, например, md также применяется к lg или xl, если они явно не определены.
- sm: small screens e.g. phones
- md: medium screens e.g. tablets
- lg: large screens e.g. notebooks
- xl: larger screens .e.g monitors