ꯁ꯭ꯄꯦꯁꯤꯡ ꯇꯧꯕꯥ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯁꯣꯔꯇꯍꯦꯟꯗ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ ꯃꯥꯔꯖꯤꯟ, ꯄꯦꯗꯤꯡ, ꯑꯃꯁꯨꯡ ꯒꯦꯞ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯔꯕꯥ ꯔꯦꯟꯖ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫
ꯃꯥꯔꯖꯤꯟ ꯑꯃꯁꯨꯡ ꯄꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯁꯣꯔꯇꯍꯦꯟꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯤ ꯁꯥꯏꯗꯁꯤꯡꯒꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯗꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ-ꯐ꯭ꯔꯦꯟꯗꯂꯤ margin
ꯅꯠꯠꯔꯒꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯦꯁꯥꯏꯟ ꯇꯧ꯫ padding
ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ, ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯄꯨꯝꯅꯃꯛ, ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯔꯤ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯒꯤ ꯁꯦꯃꯒꯠꯄꯗꯒꯤ .25rem
ꯍꯧꯔꯒꯥ 3rem
.
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯒ꯭ꯔꯤꯗ ꯂꯦꯑꯥꯎꯠ ꯃꯣꯗ꯭ꯌꯨꯜ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ? ꯒꯦꯞ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯈꯟꯅꯕꯤꯌꯨ .
ꯅꯣꯇꯦꯁꯟ ꯇꯧꯕꯥ꯫
ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ, ꯗꯒꯤ xs
, xxl
ꯃꯈꯣꯌꯗꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯃꯁꯤꯒꯤ ꯃꯔꯃꯗꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯗꯨꯗꯒꯤ min-width: 0
ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯑꯃꯅꯥ ꯕꯣꯟꯗ ꯇꯧꯗꯦ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯗꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫
ꯀ꯭ꯂꯥꯁꯁꯤꯡ {property}{sides}-{size}
ꯑꯁꯤ , , , , xs
ꯑꯃꯁꯨꯡ . {property}{sides}-{breakpoint}-{size}
_sm
md
lg
xl
xxl
ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ ꯍꯥꯌꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ:
m
- ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫margin
p
- ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫padding
ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯁꯥꯏꯗꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ:
t
- ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛmargin-top
ꯅꯠꯔꯒꯥ ...padding-top
b
- ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛmargin-bottom
ꯅꯠꯔꯒꯥ ...padding-bottom
s
- (ꯍꯧꯖꯤꯛ) ꯁꯦꯠ ꯇꯧꯕꯥmargin-left
ꯅꯠꯠꯔꯒꯥpadding-left
ꯑꯦꯜ.ꯇꯤ.ꯑꯥꯔ.ꯗꯥ,margin-right
ꯅꯠꯠꯔꯒꯥpadding-right
ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯗꯥ ꯂꯩꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫e
- (ꯑꯔꯣꯏꯕꯥ) ꯁꯦꯠ ꯇꯧꯕꯥmargin-right
ꯅꯠꯠꯔꯒꯥpadding-right
ꯑꯦꯜ.ꯇꯤ.ꯑꯥꯔ.ꯗꯥ,margin-left
ꯅꯠꯠꯔꯒꯥpadding-left
ꯑꯥꯔ.ꯇꯤ.ꯑꯦꯜ.ꯗꯥ ꯂꯩꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫x
- ꯑꯅꯤꯃꯛ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ*-left
ꯑꯃꯁꯨꯡ ...*-right
y
- ꯑꯅꯤꯃꯛ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ*-top
ꯑꯃꯁꯨꯡ ...*-bottom
- blank - ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯥꯏꯀꯩ ꯴ ꯄꯨꯝꯅꯃꯛꯇꯥ
margin
ꯅꯠꯔꯒꯥ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫padding
ꯁꯥꯏꯖ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ:
0
margin
- ꯅꯠꯔꯒꯥpadding
ꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯂꯧꯊꯣꯀꯄꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫0
1
margin
- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥpadding
ꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * .25
2
margin
- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥpadding
ꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * .5
3
margin
- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥpadding
ꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer
4
margin
- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥpadding
ꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * 1.5
5
margin
- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥpadding
ꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * 3
auto
margin
- ꯇꯨ ꯑꯣꯇꯣ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫
$spacers
( ꯁꯥꯁ ꯃꯦꯞ ꯚꯦꯔꯤꯑꯦꯕꯂꯗꯥ ꯑꯦꯟꯠꯔꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯁꯥꯏꯖꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫)
ꯈꯨꯗꯃꯁꯤꯡ꯫
ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯔꯤꯞꯔꯖꯦꯟꯇꯦꯇꯤꯕ ꯈꯨꯗꯝ ꯈꯔꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ꯫
ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ .mx-auto
ꯐꯤꯛꯁ-ꯋꯥꯏꯗ ꯕ꯭ꯂꯣꯛ ꯂꯦꯚꯦꯜ ꯀꯟꯇꯦꯟꯇ-ꯑꯔꯕꯥꯟ ꯀꯟꯇꯦꯟꯇ ꯂꯩꯕꯥ display: block
ꯑꯃꯁꯨꯡ width
ꯁꯦꯠ ꯑꯃꯥ-ꯍꯣꯔꯤꯖꯣꯟꯇꯦꯜ ꯃꯥꯔꯖꯤꯅꯁꯤꯡ ꯑꯗꯨ auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯟ ꯑꯣꯏꯕꯥ꯫
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ, margin
ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡꯅꯥ ꯅꯦꯒꯦꯇꯤꯕ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ ( padding
ꯇꯧꯕꯥ ꯉꯃꯗꯦ)꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯏ , ꯑꯗꯨꯕꯨ ꯁꯦꯇꯤꯡ ꯇꯧꯗꯨꯅꯥ ꯁꯥꯁꯇꯥ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ ꯌꯥꯏ $enable-negative-margins: true
.
ꯁꯤꯟꯇꯦꯛꯁ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ, ꯄꯣꯖꯤꯇꯤꯕ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯃꯥꯟꯅꯩ, ꯑꯗꯨꯕꯨ n
ꯍꯥꯌꯖꯔꯀꯄꯥ ꯁꯥꯏꯖ ꯑꯗꯨꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯍꯥꯄꯆꯤꯅꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯤ ꯑꯣꯟꯅ-ꯇꯩꯅꯕꯗꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯄꯤꯔꯤ .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
ꯑꯍꯥꯡꯕ
ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ display: grid
, ꯅꯍꯥꯛꯅꯥ gap
ꯃꯃꯥꯡꯒꯤ ꯒ꯭ꯔꯤꯗ ꯀꯟꯇꯦꯅꯔꯗꯥ ꯂꯩꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ display: grid
ꯃꯁꯤꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯒ꯭ꯔꯤꯗ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯗꯥ ( ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤ ꯑꯉꯥꯡꯁꯤꯡ) ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯗꯒꯤ ꯀꯅꯕꯥ ꯉꯃꯒꯅꯤ꯫ ꯒꯦꯞ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏ, ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯃꯒꯠꯂꯤ, ꯃꯁꯤ $spacers
ꯁꯥꯁ ꯃꯦꯄꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ꯫
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
ꯁꯄꯣꯔꯠ ꯑꯁꯤꯗꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯒ꯭ꯔꯤꯗ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ, ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ $spacers
ꯃꯦꯞ ( 0
– 5
)ꯗꯒꯤ ꯁꯥꯏꯖ ꯶ ꯌꯥꯑꯣꯔꯤ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ .gap-auto
ꯃꯔꯃꯗꯤ ꯃꯁꯤ ꯏꯐꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ .gap-0
.
ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫
ꯃꯦꯄꯁꯤꯡ꯫
ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁ ꯃꯦꯄꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯂꯥꯎꯊꯣꯛꯂꯤ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ
ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯗꯥ scss/_utilities.scss
. ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ API ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),