Dathanna
Cuir an bhrí in iúl colorle dornán de ranganna áirgiúlachta datha. Áirítear leis sin tacaíocht do naisc stílithe le stáit hover, freisin.
Dathanna
Dathaigh téacs le fóntais datha. Más mian leat naisc a dhathú, is féidir leat na .link-*ranganna cúntóra a bhfuil :hoveragus :focusstáit acu a úsáid.
.téacs-bunscoile
.téacs-tánaisteach
.téacs-rath
.téacs-chontúirt
.téacs-rabhadh
.téacs-eolas
.téacs-éadrom
.téacs-dorcha
.téacs-chomhlacht
.téacs-bhalbhaithe
.téacs-bán
.téacs-dubh-50
.téacs-bán-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>Brí a chur in iúl do theicneolaíochtaí cúnta
Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .visually-hiddenrang.
Sainiúlacht
Uaireanta ní féidir ranganna comhthéacsúla a chur i bhfeidhm mar gheall ar shainiúlacht roghnóir eile. I gcásanna áirithe, is réiteach leordhóthanach é ábhar do dhúile a chuimilt in <div>eilimint shéimeantach nó níos mó leis an rang atá ag teastáil.
Sass
Chomh maith leis an bhfeidhmiúlacht Sass seo a leanas, smaoinigh ar léamh faoi ár n- airíonna saincheaptha CSS (aka athróga CSS) le haghaidh dathanna agus níos mó.
Athróga
Is iad ár dathanna téama a ghintear formhór colorna bhfóntas, arna n-athshannadh ónár n-athróg cineálach pailéad dathanna.
$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;
Tá dathanna liathscála ar fáil freisin, ach ní úsáidtear ach fo-thacar chun aon fhóntais a ghiniúint.
$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;
Léarscáil
Ansin cuirtear dathanna na dtéamaí isteach ar léarscáil Sass ionas gur féidir linn lúb a chur orthu chun ár bhfóntais, ár modhnóirí comhpháirte agus go leor eile a ghiniúint.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Tá dathanna liathscála ar fáil freisin mar léarscáil Sass. Ní úsáidtear an léarscáil seo chun aon fhóntais a ghiniúint.
$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
Déantar fóntais dath a dhearbhú inár bhfóntas API i scss/_utilities.scss. Foghlaim conas an API fóntais a úsáid.
"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,
)
)
),