Faarwen
Vermëttelt Bedeitung duerch colormat enger Handvoll Faarf Utility Klassen. Ëmfaasst Ënnerstëtzung fir Styling Links mat Hover Staaten och.
Faarwen
Colorize Text mat Faarf Utilities. Wann Dir Linke wëllt faarwen, kënnt Dir d' .link-*Helferklassen benotzen déi :hovera :focusStaaten hunn.
.text-primär
.text-sekundär
.Text-Erfolleg
.Text-Gefor
.Text-Warnung
.text-info
.Text-Liicht
.Text-däischter
.Text-Kierper
.Text gedämpft
.Text-wäiss
.text-schwaarz-50
.text-wäiss-50
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>Bedeitung vun Hëllefstechnologien
D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .visually-hiddenKlass.
Spezifizitéit
Heiansdo kënnen kontextuell Klassen net applizéiert ginn wéinst der Spezifizitéit vun engem anere Selektor. A verschiddene Fäll ass eng genuch Léisung fir Ären Element Inhalt an engem <div>oder méi semanteschen Element mat der gewënschter Klass ze wéckelen.
Sass
Zousätzlech zu der folgender Sass Funktionalitéit, betruecht iwwer eis abegraff CSS Custom Properties (alias CSS Variablen) fir Faarwen a méi ze liesen.
Variablen
Déi meescht colorUtilities ginn duerch eis Thema Faarwen generéiert, vun eise generesche Faarfpalette Variabelen nei zougewisen.
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
Grayscale Faarwen sinn och verfügbar, awer nëmmen e Subset gëtt benotzt fir all Utilities ze generéieren.
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Kaart
Themefaarwen ginn dann an eng Sass Kaart gesat, sou datt mir iwwer si kënne schloe fir eis Utilities, Komponentmodifikateuren a méi ze generéieren.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Grayscale Faarwen sinn och als Sass Kaart verfügbar. Dës Kaart gëtt net benotzt fir Utilities ze generéieren.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
Utilities API
Faarf Utilities sinn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),