Langi za langi
Tuusa amakulu okuyita colormu n'engalo entono eza langi utility classes. Mulimu obuwagizi bw'okukola sitayiro enkolagana n'embeera za hover, era.
Langi za langi
Langi y’ebiwandiiko n’ebikozesebwa mu langi. Bwoba oyagala okukuba langi ku links, osobola okukozesa .link-*helper classes ezirina :hoverne :focusstates.
.ekiwandiiko-ekisookerwako
.ekiwandiiko-ekyokubiri
.ekiwandiiko-obuwanguzi
.ekiwandiiko-akabi
.ekiwandiiko-okulabula
.ekiwandiiko-amawulire
.ekiwandiiko-ekitangaala
.ekiwandiiko-ekizikiza
.ekiwandiiko-omubiri
.ekiwandiiko-ekisirise
.ekiwandiiko-enjeru
.ekiwandiiko-ekiddugavu-50
.ekiwandiiko-enjeru-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>Okutuusa amakulu mu tekinologiya ayamba
Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .visually-hiddenkiraasi.
Okwetongola
Oluusi ebika by’embeera (contextual classes) tebisobola kukozesebwa olw’obutonde obw’enjawulo obw’omusunsuzi omulala. Mu mbeera ezimu, eky’okugonjoola ekimala kwe kuzinga ebirimu eby’ekintu kyo mu kintu <div>eky’amakulu oba okusingawo n’ekibiina ky’oyagala.
Sass nga bwe kiri
Ng’oggyeeko enkola ya Sass eno wammanga, lowooza ku kusoma ku bintu byaffe eby’ennono ebya CSS ebiteekeddwamu (aka CSS variables) ku langi n’ebirala.
Enkyukakyuka ezikyukakyuka
Ebisinga obungi colorebikozesebwa bikolebwa langi zaffe ez’omulamwa, eziddamu okuweebwa okuva mu nkyukakyuka zaffe eza langi ez’enjawulo.
$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;
Langi za enzirugavu nazo ziriwo, naye ekitundu ekitono kyokka kye kikozesebwa okukola ebikozesebwa byonna.
$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;
Maapu
Langi z’omulamwa olwo ziteekebwa mu maapu ya Sass tusobole okuzikolako okukola ebikozesebwa byaffe, ebikyusa ebitundu, n’ebirala.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Langi za Grayscale nazo zisangibwa nga maapu ya Sass. Maapu eno tekozesebwa kukola bikozesebwa byonna.
$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
);
Ebikozesebwa API
Ebikozesebwa ebya langi birangiriddwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.
"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,
)
)
),