ꯁ꯭ꯄꯦꯁꯤꯡ ꯇꯧꯕꯥ꯫

ꯃꯥꯔꯖꯤꯟ ꯑꯃꯁꯨꯡ ꯄꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯁꯣꯔꯇꯍꯦꯟꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯤ ꯁꯥꯏꯗꯁꯤꯡꯒꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯗꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ-ꯐ꯭ꯔꯦꯟꯗꯂꯤ marginꯅꯠꯠꯔꯒꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯦꯁꯥꯏꯟ ꯇꯧ꯫ paddingꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ, ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯄꯨꯝꯅꯃꯛ, ꯑꯃꯁꯨꯡ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯔꯤ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯒꯤ ꯁꯦꯃꯒꯠꯄꯗꯒꯤ .25remꯍꯧꯔꯒꯥ 3rem.

ꯅꯣꯇꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ, ꯗꯒꯤ xs, xxlꯃꯈꯣꯌꯗꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯃꯁꯤꯒꯤ ꯃꯔꯃꯗꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯗꯨꯗꯒꯤ min-width: 0ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯑꯃꯅꯥ ꯕꯣꯟꯗ ꯇꯧꯗꯦ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯗꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡ {property}{sides}-{size}ꯑꯁꯤ , , , , xsꯑꯃꯁꯨꯡ . {property}{sides}-{breakpoint}-{size}_smmdlgxlxxl

ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ ꯍꯥꯌꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ:

• 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

ꯁꯥꯏꯖ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤꯡꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ:

• 0margin- ꯅꯠꯔꯒꯥ paddingꯁꯦꯠ ꯇꯧꯗꯨꯅꯥ ꯂꯧꯊꯣꯀꯄꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫0
• 1margin- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ paddingꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * .25
• 2margin- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ paddingꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * .5
• 3margin- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ paddingꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer
• 4margin- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ paddingꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * 1.5
• 5margin- (ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ) ꯅꯠꯔꯒꯥ paddingꯇꯨ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫$spacer * 3
• automargin- ꯇꯨ ꯑꯣꯇꯣ ꯁꯦꯠ ꯇꯧꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛ꯫

$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,
);

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯗꯥ 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),