in English

kalakala

Kākoʻo ʻia ʻo Bootstrap e kahi ʻōnaehana waihoʻoluʻu nui e hoʻohālikelike i kā mākou ʻano a me nā ʻāpana. Hāʻawi kēia i ka hoʻopilikino piha ʻana a me ka hoʻonui ʻana no kēlā me kēia papahana.

Ma kēia ʻaoʻao

Nā kala kumuhana

Hoʻohana mākou i kahi ʻāpana o nā waihoʻoluʻu āpau e hana i kahi palette liʻiliʻi liʻiliʻi no ka hana ʻana i nā kala kala, loaʻa pū me nā ʻano Sass a me kahi palapala ʻāina Sass ma ka scss/_variables.scssfaila Bootstrap.

Papahana

lua

Pōmaikaʻi

ʻO ka pōʻino

ʻŌlelo aʻo

ʻIke

Māmā

Poʻeleʻele

Loaʻa kēia mau kala āpau ma ke ʻano he palapala Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

E nānā i kā mākou palapala ʻāina Sass a me nā puka lou no ka hoʻololi ʻana i kēia mau kala.

Nā kala a pau

Loaʻa nā kala Bootstrap āpau e like me nā ʻano Sass a me kahi palapala Sass ma ka scss/_variables.scssfaila. No ka pale ʻana i ka nui o ka faila, ʻaʻole mākou e hana i nā kikokikona a i ʻole nā papa waihoʻoluʻu no kēlā me kēia o kēia mau ʻano. Akā, koho mākou i kahi ʻāpana o kēia mau kala no kahi palette kumuhana .

E nānā pono i nā ratio like ʻole i kou hoʻopilikino ʻana i nā kala. E like me ka mea i hōʻike ʻia ma lalo nei, ua hoʻohui mākou i ʻekolu lakiō ʻokoʻa i kēlā me kēia kala nui—hoʻokahi no nā kala o kēia manawa, hoʻokahi no ke keʻokeʻo, a hoʻokahi no ka ʻeleʻele.

$uliuli#0d6efd

$uliuli-100

$uliuli-200

$uliuli-300

$uliuli-400

$uliuli-500

$uliuli-600

$uliuli-700

$uliuli-800

$uliuli-900

$ indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ʻulaʻula#6f42c1

$ʻulaʻula-100

$ʻulaʻula-200

$ʻulaʻula-300

$ʻulaʻula-400

$ʻulaʻula-500

$ʻulaʻula-600

$ʻulaʻula-700

$ʻulaʻula-800

$ʻulaʻula-900

$ ʻulaʻula#d63384

$ʻulaʻula-100

$ ʻulaʻula-200

$ʻulaʻula-300

$ ʻulaʻula-400

$ʻulaʻula-500

$ ʻulaʻula-600

$ ʻulaʻula-700

$ ʻulaʻula-800

$ ʻulaʻula-900

$ulaula#dc3545

$ʻulaʻula-100

$ʻulaʻula-200

$ula-300

$ʻulaʻula-400

$ʻulaʻula-500

$ ʻulaʻula-600

$ ʻulaʻula-700

$ ʻulaʻula-800

$ʻulaʻula-900

$alani#fd7e14

$alani-100

$alani-200

$alani-300

$alani-400

$alani-500

$alani-600

$alani-700

$alani-800

$alani-900

$melemele#ffc107

$ melemele-100

$ melemele-200

$ melemele-300

$ melemele-400

$ melemele-500

$ melemele-600

$ melemele-700

$ melemele-800

$mele-900

$ ʻōmaʻomaʻo#198754

$'ōmaʻomaʻo-100

$'ōmaʻomaʻo-200

$'ōmaʻomaʻo-300

$'ōmaʻomaʻo-400

$'ōmaʻomaʻo-500

$'ōmaʻomaʻo-600

$'ōmaʻomaʻo-700

$'ōmaʻomaʻo-800

$'ōmaʻomaʻo-900

$teal#20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$ hina-500#adb5bd

$ hina-100

$ hina-200

$ hina-300

$ hina-400

$ hina-500

$ hina-600

$ hina-700

$ hina-800

$ hina-900

$ʻeleʻele#000

$keokeo#fff

Nā memo ma Sass

ʻAʻole hiki iā Sass ke hoʻomohala i nā ʻano like ʻole, no laila ua hana lima mākou i nā ʻano like ʻole no kēlā me kēia kala a me ka malu iā mākou iho. Hōʻike mākou i ka waiwai waena (e laʻa, $blue-500) a hoʻohana i nā hana kala maʻamau e hoʻomālamalama (māmā) a i ʻole ka malu (pōʻeleʻele) i kā mākou kala ma o mix()ka hana kala a Sass.

mix()ʻAʻole like ka hoʻohana ʻana me ka a lighten()- darken()ʻo ka mea mua e hoʻohui i ke kala i ʻōlelo ʻia me ke keʻokeʻo a ʻeleʻele paha, ʻoiai ka mea hope e hoʻoponopono wale i ka waiwai māmā o kēlā me kēia kala. ʻO ka hopena he hui piha piha o nā kala, e like me ka hōʻike ʻana ma kēia CodePen demo .

Hoʻohana ʻia kā mākou tint-color()a me shade-color()nā hana mix()me kā mākou ʻano $theme-color-intervalhoʻololi, e kuhikuhi ana i kahi waiwai pākēneka i hoʻopaʻa ʻia no kēlā me kēia kala hui ʻia a mākou e hana ai. E ʻike i nā scss/_functions.scssa me scss/_variables.scssnā faila no ke code kumu piha.

Nā palapala 'āina Sass kala

Aia nā waihona Sass kumu o Bootstrap i ʻekolu palapala ʻāina e kōkua iā ʻoe e hoʻopaʻa wikiwiki a maʻalahi i ka papa inoa o nā kala a me nā waiwai hex.

$colors500papa inoa i nā waihoʻoluʻu kumu ( ) i loaʻa
$theme-colorspapa inoa i nā kala kumumanaʻo i kapa inoa ʻia (e hōʻike ʻia ma lalo)
$grayspapa inoa i nā ʻoni a pau a me nā aka hina

I loko o scss/_variables.scsska , e ʻike ʻoe i nā ʻano waihoʻoluʻu o Bootstrap a me ka palapala ʻāina Sass. Eia kekahi laʻana o ka $colorspalapala ʻāina Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Hoʻohui, wehe, a hoʻololi paha i nā waiwai i loko o ka palapala ʻāina no ka hoʻonui ʻana i ke ʻano o ka hoʻohana ʻia ʻana ma nā ʻāpana ʻē aʻe. ʻO ka mea pōʻino i kēia manawa, ʻaʻole hoʻohana nā mea āpau i kēia palapala Sass. E hoʻoikaika ʻia nā mea hou e hiki mai ana e hoʻomaikaʻi i kēia. A hiki i kēlā manawa, e hoʻolālā i ka hoʻohana ʻana i nā ${color}mea hoʻololi a me kēia palapala Sass.

Laʻana

Eia pehea ʻoe e hoʻohana ai i kēia mau mea i kāu Sass:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Loaʻa nō hoʻi nā papa hana kala a me ka hope no ka hoʻonohonoho ʻana colora background-colorme ka hoʻohana ʻana i 500nā waiwai kala.