in English

Nuŋɔɖi

Nuŋlɔɖiwo kple kpɔɖeŋuwo na nuŋɔŋlɔ ƒe dɔwɔnu siwo bɔ be woatsɔ akpɔ nuwo ƒe ɖoɖowɔwɔ, wo babla, woƒe kpekpeme, kple bubuwo dzi.

Le axa sia dzi

Nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu

Gbugbɔ ɖo nuŋɔŋlɔwo ɖe akpa siwo me nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ƒe klasswo le bɔbɔe. Le gɔmedzedze, nuwuwu, kple titina ƒe ɖoɖowɔwɔ gome la, ŋuɖoɖo ƒe klasswo li siwo zãa nukpɔkpɔ ƒe kekeme ƒe gbagbãƒe ɖeka ma ke abe grid ɖoɖoa ene.

Dze nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le nukpɔkpɔ ƒe lolomewo katã dzi.

Nuŋɔŋlɔ si woɖo ɖe titina le nukpɔkpɔ ƒe lolomewo katã dzi.

Wu nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le nukpɔkpɔ ƒe lolomewo katã dzi.

Dze nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔƒe siwo ƒe lolome nye SM (sue) alo keke wu.

Dze nuŋɔŋlɔ siwo woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔmɔ̃ siwo ƒe lolome nye MD (medium) alo esi keke wu la dzi.

Dze nuŋɔŋlɔ siwo woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔmɔ̃ siwo ƒe lolome nye LG (lolo) alo esi keke wu la dzi.

Dze nuŋɔŋlɔ siwo woɖo ɖe ɖoɖo nu gɔme le nukpɔkpɔmɔ̃ siwo ƒe lolome nye XL (lolo wu) alo esiwo keke wu la dzi.

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

De dzesii be míenaa utility classes na nuŋɔŋlɔ si sɔ o. Togbɔ be le atsyɔ̃ɖoɖo gome la, nuŋɔŋlɔ siwo ŋu kpeɖodzi le ate ŋu adze ame ŋu wu hã la, enaa nyawo dome didime si woɖo ɖe wo nɔewo dome le vome wu eye le esia ta xexlẽ sesẽna wu.

Nuŋɔŋlɔwo babla kple woƒe agbɔsɔsɔ fũ

Kpe nuŋɔŋlɔa ɖe .text-wrapklass aɖe me.

Ele be mawunyakpukpui sia naxatsa.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Xɔ mɔ na nuŋɔŋlɔ be wòagaxatsa kple .text-nowrapklass o.

Ele be mawunyakpukpui sia nayɔ dzila la me fũ.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Nyawo ƒe gbagbã

Xɔ mɔ na nuŋɔŋlɔ ƒe ka didiwo be woagagbã wò akpawo ƒe ɖoɖo o to to .text-breakset word-wrap: break-wordkple zazã me word-break: break-word. Míezãa word-wrapɖe esi bɔ wu teƒe overflow-wraphena web-browser ƒe kpekpeɖeŋu si keke ta wu, eye míetsɔa esiwo woɖe ɖa la kpena ɖe eŋu word-break: break-wordbe míaƒo asa na nya siwo ku ɖe flex containers ŋu.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

De dzesii be nyawo gbagbã mateŋu adzɔ le Arabgbe me o , si nye RTL gbe si wozãna wu. Eyata .text-breakwoɖee ɖa le míaƒe RTL si woƒo ƒu CSS la me.

Nuŋɔŋlɔ ƒe tɔtrɔ

Trɔ nuŋɔŋlɔ ɖe akpawo me kple nuŋɔŋlɔ ƒe ŋɔŋlɔdzesi gãwo ƒe klasswo.

Nuŋɔŋlɔ suewo.

Nuŋɔŋlɔ gãwo.

Nuŋɔŋlɔ si woŋlɔ ɖe agbalẽ me.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

De dzesi alesi .text-capitalizewòtrɔa nya ɖesiaɖe ƒe ŋɔŋlɔdzesi gbãtɔ ko, eye wògblẽa ŋɔŋlɔdzesi bubu ɖesiaɖe ƒe nya la ɖi be mekpɔa ŋusẽ ɖe edzi o.

Font ƒe lolome

font-sizeTrɔ nuŋɔŋlɔa ƒe akpaa kaba . Togbɔ be míaƒe tanya ƒe klasswo (le kpɔɖeŋu me, .h1– .h6) wɔa dɔ font-sizele , font-weight, kple ŋu line-heighthã la, dɔwɔnu siawo wɔa dɔ font-sizele . Dɔwɔnu siawo ƒe lolome sɔ kple HTML ƒe tanya ƒe akpawo, eyata ne xexlẽmea le dzidzim ɖe edzi la, woƒe lolome dzi ɖena kpɔtɔna.

.fs-1 nuŋɔŋlɔ

.fs-2 nuŋɔŋlɔ

.fs-3 ƒe nuŋɔŋlɔ

.fs-4 ƒe nuŋɔŋlɔ

.fs-5 nuŋɔŋlɔ

.fs-6 nuŋɔŋlɔ

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Trɔ asi le wò font-sizes siwo li ŋu to asitɔtrɔ le $font-sizesSass ƒe anyigbatata ŋu me.

Ŋɔŋlɔdzesiwo ƒe kpekpeme kple nuŋɔŋlɔ siwo wotsɔ ŋlɔa nu ɖe nu dzi

font-weightTrɔ alo ƒe nuŋɔŋlɔa kaba font-stylekple dɔwɔnu siawo. font-stylewoɖea nuzazãwo .fst-*ƒe font-weightkpukpuiwo be .fw-*.

Nuŋɔŋlɔ si me woŋlɔ nu ɖo kple bold.

Bolder weight text (ne wotsɔe sɔ kple dzila ƒe akpaa).

Kpekpeme si sɔ ƒe nuŋɔŋlɔ.

Nuŋɔŋlɔ si ƒe kpekpeme le bɔbɔe.

Nuŋɔŋlɔ si ƒe kpekpeme le bɔbɔe wu (ne wotsɔe sɔ kple dzila ƒe akpaa).

Nuŋɔŋlɔ si woŋlɔ kple nuŋɔŋlɔ si woŋlɔ kple asi.

Nuŋɔŋlɔ kple nuŋɔŋlɔ ƒe atsyã si sɔ

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Fli ƒe kɔkɔme

Trɔ fli ƒe kɔkɔme kple .lh-*utilities.

Esia nye memama didi aɖe si woŋlɔ tsɔ ɖe alesi míaƒe dɔwɔnuwo kpɔa ŋusẽ ɖe element aɖe ƒe fli-kɔkɔme dzii fia. Wozãa klasswo ɖe element la ŋutɔ ŋu alo ɣeaɖewoɣi le dzila element la ŋu. Woateŋu atrɔ asi le klass siawo ŋu alesi wòhiãe kple míaƒe utility API.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

Teƒe ɖeka

Trɔ tiatia aɖe ɖe míaƒe monospace ŋɔŋlɔdzesiwo ƒe ƒuƒoƒoa me kple .font-monospace.

Esia le monospace me

<p class="font-monospace">This is in monospace</p>

Trɔ asi le amadede ŋu

Trɔ asi le nuŋɔŋlɔ alo kadodo aɖe ƒe amadede ŋu kple .text-reset, ale be wòanyi amadedea ƒe dome tso edzila gbɔ.

Nuŋɔŋlɔ si me mekɔ o kple kadodo si nye reset .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Nuŋɔŋlɔ ƒe atsyɔ̃ɖoɖo

Atsyɔ̃ɖoɖo na nuŋɔŋlɔ le akpawo me kple nuŋɔŋlɔ ƒe atsyɔ̃ɖoɖo ƒe klasswo.

Fli aɖe le nuŋɔŋlɔ sia te.

Fli aɖe le nuŋɔŋlɔ sia me tom.

Woɖe eƒe nuŋɔŋlɔ ƒe atsyɔ̃ɖoɖo ɖa le kadodo sia me

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Sass ƒe nyawo

Nusiwo trɔna

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Anyigbatatawo

Wowɔa ŋɔŋlɔdzesiwo ƒe lolome ƒe dɔwɔnuwo tso anyigbatata sia me, tsɔ kpe ɖe míaƒe dɔwɔnuwo ƒe API ŋu.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

Dɔwɔnuwo ƒe API

Woɖe gbeƒã ŋɔŋlɔdzesi kple nuŋɔŋlɔ ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),