Halluuwwan
Hiika karaa colorgita faayidaa halluu harka muraasaan dabarsuu. Deeggarsa walqabsiisota akkaataa haalawwan hover waliin of keessatti qabata, akkasumas.
Halluuwwan
Faayidaa halluutiin barruu halluu itti godhi. Yoo hidhannoo halluu itti gochuu barbaadde, .link-*gita gargaaraa kanneen qaban :hoverfi :focusstates fayyadamuu dandeessa.
.barreeffama-jalqabaa
.barreeffama-lammaffaa
.barreeffama-milkaa'ina
.barreeffama-balaa
.barreeffama-akeekkachiisa
.odeeffannoo-barreeffamaa
.barreeffama-ifa
.barreeffama-dukkana
.barreeffama-qaama
.barreeffama-kan dhaamfame
.barreeffama-adii
.barreeffama-gurraacha-50
.barreeffama-adii-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>Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu
Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hiddengita waliin dhokatee.
Addaa ta’uu
Yeroo tokko tokko gitaawwan haalata (contextual classes) sababa adda ta'uu filannoo biraatiin hojiirra ooluu hin danda'an. Haala tokko tokko keessatti, furmaanni gahaan qabiyyee qaama keetii qaama <div>hiikaa ykn isaa ol gita barbaadame waliin marsuudha.
Sass jedhama
Dalagaa Sass armaan gadii dabalatee, waa'ee amaloota amala CSS keenya hammataman (aka jijjiiramoota CSS) halluuwwanii fi kkf dubbisuu yaadaa.
Jijjiiramoota
Faayidaaleen baay'een colorhalluuwwan mata duree keenyaatiin kan uumaman yoo ta'u, jijjiiramoota paaletii halluu waliigalaa keenyaa irraa irra deebi'amee ramadama.
$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;
Halluuwwan halluu diimaas ni jiru, garuu tuuta xiqqaa qofti faayidaa kamiyyuu uumuuf fayyadama.
$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;
Kaartaa
Halluuwwan mata duree sana booda kaartaa Sass keessa kaa'amu kanaaf isaan irratti loop gochuun faayidaa keenya, fooyyessitoota qaamaa fi kkf maddisiisuu dandeenya.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Halluuwwan halluu diimaa akka kaartaa Sass ttis ni argamu. Kaartaan kun faayidaa kamiyyuu maddisiisuudhaaf hin oolu.
$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
);
API faayidaa
Faayidaaleen halluu API faayidaa keenya keessatti labsamu bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.
"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,
)
)
),